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

问题描述：

不知道我在这里丢失了什么，但我试图更改锚标记上的图形。它可以从控制台运行，但不能从脚本运行。文本右侧的箭头应在上下切换。JQuery CSS伪类选择器在控制台中工作，但不是从脚本中工作

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

仅供参考不工作的 “伪代码” 的jsfiddle是没有用的。 – Pointy 2014-11-04 01:03:40

另外，这里最重要的是“prodToggle”的价值。正数和负数的非零数值测试为“真”。变量“prodToggle”应该初始化为“true”或“false”，然后可以用'！'运算符切换其值。 – Pointy 2014-11-04 01:05:58

首先，确保在尝试调用jQuery之前加载jQuery是明智的。将jQuery中的所有jQuery代码作为参数包装在自调用函数中。其次，您应该尝试在JavaScript中添加alert或console.log，以确保它被调用。在问一个问题之前没有做到这一点已经引起了许多红脸。 – Adam 2014-11-04 01:07:27

答

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

啊......我的问题是，我应该把它分解成它自己的事件处理程序，而不是试图将它作为一个简单的条件运行。难怪它在控制台中工作，而不是在代码中。谢谢大家！ – 2014-11-04 16:50:55

答

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

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

相关推荐