Why doesn't jQuery ".css" work with variables?
<p><code>.css()</code> works in this case: </p>

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

<p>However it doesn't work if you do this:</p>

<pre><code>const $targetEl = $(toggle.targetEl)
if ($targetEl.css('opacity') === '0') {
    // $targetEl.css('opacity') =&gt; undefined
</code></pre>

<p>Is this jQuery's default behavior? Or am I doing something wrong?</p>

<p><strong>EDIT:</strong></p>

<p>The last example doesn't output any errors. And <code>console.log($targetEl)</code> shows:</p>

<pre><code>[prevObject: jQuery.fn.init[1], context: document, selector: ".map"]
</code></pre>

<p><strong>EDIT 2:</strong></p>

<p><strong>directive.js:</strong></p>

<pre><code>export const toggle = {
  update: function (toggle) {
    const $el = $(this.el)
    const $targetEl = $(toggle.targetEl)
    console.log($targetEl)
    $el.click(() =&gt; {
      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, () =&gt; {
          $(toggle.targetEl).css('visibility', 'hidden')
        })
      }
    })
  }
}
</code></pre>

<p><strong>component.vue:</strong></p>

<pre><code>&lt;button class="toggle-map" v-toggle="toggle"&gt;
  &lt;i class="fa fa-map"&gt;&lt;/i&gt;
&lt;/button&gt;

&lt;script&gt;
export default {
  data () {
    return {
      toggle: {
        targetEl: '.map'
      }
    }
  }
</code></pre>