Question

不确定我在这里缺少什么，但我正在尝试更改锚标签上的图形。它适用于控制台，但不适用于脚本。文本右侧的箭头应该在向上和向下之间切换。

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函数未定义。

一旦清理干净，它就能正常工作。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我猜你的prodToggle就是问题所在。您应该使用true和false作为可能的值，我不认为-true=false。但是：!true=false

JQuery CSS伪类选择器在控制台中工作，但不在脚本中工作

2 个答案: