何時在javascript中使用css元素/類選擇器？

Question

我目前正在開發關於構建交互式網站的codecademy課程，我偶然發現了關於使用css元素的元素/類選擇的模糊性。

JavaScript的：

var main = function() {

    $('.article').click(function() {
        $('.article').removeClass('current');
        $('.description').hide();
        $(this).addClass('current');
        $(this).children('.description').show();
    });

}; 

CSS：

.current .item {
  background: rgba(206,220,206,.9);
}

為什么我必須在第4行使用元素選擇器'current'而不是類選擇器'.current'？ 它背后是否有任何規則或僅僅是jquery的規范？

Answer 1

僅僅因為班級的名稱是current而不是.current ，並且在

$('.article').removeClass('current');

current不是任何選擇器，只是要刪除的classname ，而選擇器是.article 。

您認為我們使用的是元素選擇器而不是類選擇器。 但你錯了。 你在刪除Class中看到Class這個詞並添加Class嗎？ 這意味着您傳遞的是類選擇器，而不是元素選擇器作為參數。

現在你可能會問為什么你看不到當前的點？ 因為類是使用點指定的。 實際上我們已經指定我們正在傳遞類選擇器，因為你可以在刪除Class中看到單詞“Class”並添加Class 。

Answer 2

在addClass / removeClass您使用類名（就像您在html的class屬性中指定的那個），而不是像$()那樣的DOM選擇器。

Answer 3

函數名稱removeClass（）意味着您必須聲明一個類名。 使用選擇器，您必須指定要選擇的類或ID。

Answer 4

根據docs addClass() ：

將指定的類添加到每個匹配的元素集中。

因此，您需要將classname / names作為參數傳遞，而不是通過它構建的類選擇器。

Answer 5

addClass和removeClass方法接受一個或多個空格分隔的類，以從每個匹配元素的class屬性中刪除。 要添加/刪除的calss的名稱是“current”，而不是“.current”

http://api.jquery.com/removeclass/
http://api.jquery.com/addclass/

Answer 6

在第4行中，您沒有使用'current'作為選擇器，它是一個類名。 每當你使用某個類名作為選擇器時（例如在.find('.current'), $('.current') , closest('.current') etc) then only the rule of putting 。 for class name ＃使用id等。 每當你檢查一些類存在（.hasClass（）），添加和刪除一個類（addClass（'current'），removeClass（'current'），那么你必須提到正確的類名。我希望它有所幫助。