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

我写了a fiddle来演示我的解决方案（请告诉我，如果它没有完全符合你的意图）。

$(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，它将不会影响我们。它使用事件委派来捕获匹配click的元素内发生的整个页面上的所有.inspiration-row事件。

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');

jquery单击具有相同类的元素

4 个答案: