具有相同类的jquery-click元素

jquery click element with same class

本文关键字：jquery-click 元素 同类      更新时间：2023-09-26

我得到了元素列表，当我点击第一个时，其他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');
    });
});

通过这个js-fiddle链接，您可以根据自己的需求获得问题的答案。

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;
}

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

event.target指的是事件的来源，即事件所来自的元素。我使用.closest从实际点击的祖先开始搜索，以找到与.inspiration-row匹配的最近祖先。

从那里，target指的是整个.inspiration-row，我们寻找这两个派生选择器并切换适当的类。

你在切换两个类名，好像这会让它选择其中一个。只有当元素最初具有其中一个名称时，这才是真的。我在第一个inspiration-row中添加了一个类名，所以切换会使它在任何时候都有一个或另一个。

您可以将您的点击回调函数替换为以下函数，以针对您感兴趣的特定块：

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

使用

$(this).toggleClass('shift-left shift-right');
相关文章：