Question

.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的默认行为吗？或者我做错了什么？

修改

最后一个示例不输出任何错误。 console.log($targetEl)显示：

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

编辑2：

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')
        })
      }
    })
  }
}

component.vue：

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

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

Answer 1

以这种方式解决问题：

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

这是const的范围问题......虽然我不太确定。

为什么jQuery“.css”不能与变量一起使用？

1 个答案: