为什么'；jQuery"；。css"；使用变量？

.css（）

在这种情况下有效：

if ($(toggle.targetEl).css('opacity') === '0') {
    // some code
} else {
    // more code
}

但是，如果您这样做，它将不起作用：

const $targetEl = $(toggle.targetEl)
if ($targetEl.css('opacity') === '0') {
    // $targetEl.css('opacity') => undefined

这是jQuery的默认行为吗？还是我做错了什么

编辑：

export const toggle = {
  update: function (toggle) {
    const $el = $(this.el)
    const $targetEl = $(toggle.targetEl)
    console.log($targetEl)
    $el.click(() => {
      if ($targetEl.css('opacity') === '0') {
        $(toggle.targetEl).css('visibility', 'visible')
        $(toggle.targetEl).animate({ opacity: 1 }, 200)
      } else {
        // hide element when opacity animation is done
        $(toggle.targetEl).animate({ opacity: 0 }, 200, () => {
          $(toggle.targetEl).css('visibility', 'hidden')
        })
      }
    })
  }
}

<button class="toggle-map" v-toggle="toggle">
  <i class="fa fa-map"></i>
</button>

<script>
export default {
  data () {
    return {
      toggle: {
        targetEl: '.map'
      }
    }
  }

最后一个示例没有输出任何错误。和

console.log（$targetEl）

显示：

[prevObject: jQuery.fn.init[1], context: document, selector: ".map"]

编辑2:

export const toggle = {
  update: function (toggle) {
    const $el = $(this.el)
    const $targetEl = $(toggle.targetEl)
    console.log($targetEl)
    $el.click(() => {
      if ($targetEl.css('opacity') === '0') {
        $(toggle.targetEl).css('visibility', 'visible')
        $(toggle.targetEl).animate({ opacity: 1 }, 200)
      } else {
        // hide element when opacity animation is done
        $(toggle.targetEl).animate({ opacity: 0 }, 200, () => {
          $(toggle.targetEl).css('visibility', 'hidden')
        })
      }
    })
  }
}

<button class="toggle-map" v-toggle="toggle">
  <i class="fa fa-map"></i>
</button>

<script>
export default {
  data () {
    return {
      toggle: {
        targetEl: '.map'
      }
    }
  }

directive.js:

export const toggle = {
  update: function (toggle) {
    const $el = $(this.el)
    const $targetEl = $(toggle.targetEl)
    console.log($targetEl)
    $el.click(() => {
      if ($targetEl.css('opacity') === '0') {
        $(toggle.targetEl).css('visibility', 'visible')
        $(toggle.targetEl).animate({ opacity: 1 }, 200)
      } else {
        // hide element when opacity animation is done
        $(toggle.targetEl).animate({ opacity: 0 }, 200, () => {
          $(toggle.targetEl).css('visibility', 'hidden')
        })
      }
    })
  }
}

<button class="toggle-map" v-toggle="toggle">
  <i class="fa fa-map"></i>
</button>

<script>
export default {
  data () {
    return {
      toggle: {
        targetEl: '.map'
      }
    }
  }

component.vue:

export const toggle = {
  update: function (toggle) {
    const $el = $(this.el)
    const $targetEl = $(toggle.targetEl)
    console.log($targetEl)
    $el.click(() => {
      if ($targetEl.css('opacity') === '0') {
        $(toggle.targetEl).css('visibility', 'visible')
        $(toggle.targetEl).animate({ opacity: 1 }, 200)
      } else {
        // hide element when opacity animation is done
        $(toggle.targetEl).animate({ opacity: 0 }, 200, () => {
          $(toggle.targetEl).css('visibility', 'hidden')
        })
      }
    })
  }
}

<button class="toggle-map" v-toggle="toggle">
  <i class="fa fa-map"></i>
</button>

<script>
export default {
  data () {
    return {
      toggle: {
        targetEl: '.map'
      }
    }
  }

导出默认值{
数据（）{
返回{
切换：{
targetEl:“.map”
}
}
}

以这种方式解决了问题：

const $el = $(this.el)
  $el.click(() => {
    const $targetEl = $(toggle.targetEl)
    if ($targetEl.css('opacity') === '0') {
    // some code

---

const

…是一个作用域问题，尽管我不是很确定。

这一切都取决于

$targetEl

中存储的变量类型。如果是jQuery对象，它应该可以正常工作。如果不是，那么控制台中很可能会出现语法错误。@Rorymcrossan我更新了代码。这两个代码段在逻辑上是id诱惑。我无法复制错误；代码工作正常：。我们需要更多信息来诊断问题，控制台中的任何错误，以及一个更完整的代码示例，您可以在其中设置

切换开关
及其属性。
$targetEl=…
和
如果（$targetEl…）
代码中的语句彼此相邻（如示例中所示），或者相距更远？特别是
if
是否在函数内部，而
$targetEl=…
是否在函数外部？我发布了完整的代码。