jQuery單擊元素具有相同的類

Question

我獲得了元素列表，當我單擊其他前10個也處於活動狀態時，如何僅將一個真正處於活動狀態的目標作為目標？ 這是我的js代碼

$(document).ready(function() {
    $('.inspiration-row').on('click', function() {
        $('inspiration-block').toggleClass('shift-left shift-right');
        //$('.inspiration-block').toggleClass('span12 span8');
        $('.inspiration-right').toggleClass('span0 span2');
    });
});

Answer 1

您可以將您的點擊回調函數替換為以下內容，以定位您感興趣的特定區域：

function( event ) {
  $(event.target).closest('.inspiration-block').toggleClass('shift-left shift-right');
  ...
});

Answer 2

我寫了一個小提琴來演示我的解決方案（讓我知道它是否不能完全滿足您的期望）。

$(function($) {
  $(document).on('click', '.inspiration-row', function(event) {
    var target = $(event.target).closest('.inspiration-row');
    target.find('.inspiration-block').toggleClass('shift-left shift-right');
    //$('.inspiration-block').toggleClass('span12 span8');
    target.find('.inspiration-right').toggleClass('span0 span2');
  });
});

這將注冊一個捕獲$的就緒回調，因此，如果另一個腳本加載了jquery，則不會影響我們。 它使用事件委托來捕獲整個頁面上發生在與.inspiration-row匹配的元素內的所有click事件。

event.target引用事件的來源，即事件來自的元素。 我使用.closest從實際單擊的對象中查找，以找到與.inspiration-row匹配的最接近的祖先。

從那里， target指向整個.inspiration-row ，我們尋找這兩個后代選擇器並切換適當的類。

您正在切換兩個類名，好像那會使它選擇一個或另一個。 僅當元素最初具有這些名稱之一時，這才是正確的。 我在第一個inspiration-row添加了一個類名，因此切換可以使它在任何時候具有一個或另一個。

Answer 3

通過此js小提琴鏈接，您可以根據需要獲得問題的答案。

的jsfiddle

讓我們考慮一下您的html頁面中的p標簽集。

<p class="active">If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
<p>Click me one!</p>
<p>Click me two!</p>
<p>Click me three!</p>
<p>Click me four!</p>

要處理活動的p標簽，請使用以下jquery代碼

$(document).ready(function() {
  $("p").click(function(event) {
    $(event.target.tagName).not(this).removeClass("active");
    $(this).addClass("active");
  });
});

並在樣式標簽的html頁面中添加此類。

.active {
  display: block;
  color: red;
}

Answer 4

采用

$(this).toggleClass('shift-left shift-right');