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

Question

.css() works in this case:

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

However it doesn't work if you do this:

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

Is this jQuery's default behavior? Or am I doing something wrong?

EDIT:

The last example doesn't output any errors. And console.log($targetEl) shows:

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

EDIT 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

Solved the issues in this way:

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

It's a scope problem with const ... though I'm not very sure.