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

來源

2014-11-04 Dave Kaye

僅供參考不工作的「僞代碼」的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 01:17:51

啊......我的問題是，我應該把它分解成它自己的事件處理程序，而不是試圖將它作爲一個簡單的條件運行。難怪它在控制檯中工作，而不是在代碼中。謝謝大家！ – 2014-11-04 16:50:55

我猜你prodToggle的問題。您應該使用true和false作爲可能的值，我不認爲-true=false。但是：!true=false

來源

2014-11-04 01:14:11 damare

JQuery CSS僞類選擇器在控制檯中工作，但不是從腳本中工作

回答

相關問題