jQuery的toggleClass和.css文件類名稱的順序

我有一個箭頭指向右邊的文本，單擊文本/箭頭揭示了一個div並替換與arrowDown的arrowRight。

問題：

問題來源於這樣的事實，我的代碼工作，這取決於在.css文件的順序，我不知道爲什麼應該質W jQuery的。

CSS：

.arrow{display:inline-block; width:15px; height:10px;background-repeat:no-repeat;} 
.arrowRight{background-image:url("../graphics/triangleRight.gif"); } 
.arrowDown{ background-image: url("../graphics/triangleDown.gif");}

HTML：

<div id="showListOfBids" class="align-c"> 
    List of Bids <div class="arrow arrowRight"> 
</div>

jQuery的

$("#showListOfBids").click(function(){ 
    $(".bidList").toggleClass("show"); 
    $(".arrowRight").toggleClass("arrowDown"); 
});

開發工具>元素

繃添加和刪除arrowDown

切換關：

<div class="arrow arrowRight"></div>

撥動開：

<div class="arrow arrowRight arrowDown"></div>

問題：爲什麼之類的順序.arrowDown影響顯示？ AFAIK在使用jQuery時，css文件不會被重新編譯。 jQuery將該類添加到DOM，解析器只是搜索該元素。

評論：我不喜歡在課上翻一番。我使用不正確？我正在使用removeClass和addClass並將其更改爲toggleClass

來源

2014-12-05 Mayo

爲什麼類.arrowDown的順序會影響顯示？

因爲這就是CSS的工作原理。如果有兩個規則具有相同的specificity，則稍後在文件中顯示的規則將獲勝。

在你的情況下，.arrowRight和.arrowDown具有相同的特異性。如果有這兩個類的元素，則.arrowDown獲勝。如果您切換規則，.arrowRight會贏。

AFAIK在使用jQuery時，css文件不會被重新包裝。 jQuery將該類添加到DOM，解析器只是搜索該元素。

你說得對，它與jQuery無關。瀏覽器只能看到元素具有哪些類併爲其應用規則。

因此，CSS規則的順序很重要，並且與JavaScript或jQuery無關。考慮它是一個「功能」。

來源

2014-12-05 16:05:25

因爲你已經在過去的書面arrowDown圖像：

，並具有兩個類，即arrowRight和arrowDown，最後會發生。

~~.arrowRight {background-image：url（「../ graphics/triangleRight.gif」）; }~~

.arrowDown {背景圖像：URL（「../圖形/ triangleDown.gif」）;}

要與使用肘節這樣正確去：

$(".arrowRight").toggleClass("arrowRight arrowDown");

它讓你確信只有一個箭頭：arrowRight或arrowDown

來源

2014-12-05 16:05:55

但是 - 這裏是我弄糊塗/弄錯的地方：在HTML中它會去class =「arrow arrowRightDown」不應該在HTML/DOM中的位置取代css文件中的順序？ – Mayo 2014-12-05 16:10:50

@Mayo：這不是它的工作原理。 HTML屬性中的順序無關緊要。 – 2014-12-05 16:11:44

@Mayo在html中，你應該只將其中的一個arrowRight或arrowDown，但不能同時用於初始設置。 – 2014-12-05 16:13:06

每個CSS規則有一定重量的瀏覽器。比如你有這樣的CSS

a.colored { color: violet;} 
.colored { color: orange;} 
div a {color: green;} 
a {color: red:}

這個HTML

<div><a class="colored" href="example.html">Test link</a></div>

鏈接的顏色將是紫色的，因爲a.colored規則是最具體的（它定義一個類），並有超過重量其他規則將最後應用。你可以閱讀更詳細的解釋here。

在你的例子中，你有兩個相同重量的規則。所以瀏覽器只是將它們應用於CSS文件。第一個應用.arrowRight，第二個應用.arrowDown。

這裏重要的是，只有在CSS文件中的位置很重要，而不是標籤的class屬性中的類的順序。

來源

2014-12-05 16:16:04 saNs

有趣的是 - 我認爲這不適用於jQuery的toggleClass，因爲它不是重新解析整個css文件，因此順序無關緊要。如果刪除一個類，然後添加一個類，那麼CSS中的順序應該沒有關係。我需要重新考慮如何使用toggleClass。 – Mayo 2014-12-05 16:27:59

jQuery的toggleClass和.css文件類名稱的順序

回答

相關問題