javascript - JQuery CSS 伪类选择器在控制台中有效，但在脚本中无效

Question

不确定我在这里遗漏了什么，但我正在尝试更改 anchor 标记上的图形。它可以从控制台运行，但不能从脚本运行。文本右侧的箭头应在向上和向下之间切换。

JS:

//initialize prodToggle and then:

prodToggle = -prodToggle;
if(prodToggle) {
  $('#prod').addClass('upClass').removeClass('downClass');
} else {
     $('#prod').addClass('downClass').removeClass('upClass');
}

CSS:

#mytable a.upClass::after {
  content: '\2227';
}

#mytable a.downClass::after {
  content: '\2228';
}

HTML:

<table id="mytable">
    <tr>
        <td>
            <a href="#" id="myAnchor" class="upClass" onClick="flipflop();">Test</a>
        </td>
    </tr>
</table>

Here's a pseudo-code Fiddle

Answer 1

你的 jsfiddle 完全搞砸了:你的表上缺少一个 id，你给 JQuery 的选择器没有选择任何东西，flipflop 函数是未定义的。

稍微清理一下后，它就可以正常工作了。

flipflop = function(event) {
  event.preventDefault();
  $('#myAnchor').toggleClass('upClass downClass');
}

#mytable a.upClass::after {
  content: '\2227';
}
#mytable a.downClass::after {
  content: '\2228';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
  <tr>
    <td> <a href="#" id="myAnchor" class="upClass" onclick="flipflop(event);">Test</a>

    </td>
  </tr>
</table>