将类添加到单击时具有特定类的所有元素

Add class to all elements which have a certain class when clicked on

本文关键字：元素 添加 单击      更新时间：2023-09-26

我想为所有具有类"someClass"的元素添加一个名为"group"的类 - 但仅限于，例如：

<div class="someClass">SomeText</div>
<div class="someClass">SomeOtherText</div>
<div class="someOtherClass">SomeMoreText</div>
<div class="someOtherClass">SomeMoreOtherText</div>

如果用户单击包含类"someClass"的div，则应变为以下内容：

<div class="someClass group">SomeText</div>
<div class="someClass group">SomeOtherText</div>
<div class="someOtherClass">SomeMoreText</div>
<div class="someOtherClass">SomeMoreOtherText</div>

如果用户单击包含"someOtherClass"的div，则应添加类"group"。

我尝试了以下jQuery - 不成功：

$("#someId").live("click", function() {    
    var selectedClass;
    selectedClass = $(this).attr('class');
    $('.'+selectedClass).addClass('group');
    //...followed by more jQuery...
});

我还尝试了运气：

$("#someId").live("click", function() {    
    $(this).attr('class').addClass('group');
    //...followed by more jQuery...
});

。这也不起作用:(

你应该考虑到divs有多个类的可能性——每当一个div连续点击两次时，就会发生这种情况：

​$('div').on('click',function(e) {
    var cl = $(this).attr('class'),
        carr = cl.split(/'s+/);
    for (var i=0; i<carr.length; i++) {
        $('div.'+carr[i]).addClass('newclass');
    };
});​​​​​

http://jsfiddle.net/FcXu5/

$('div').click(function() {    
    var selectedClass;
    selectedClass = $(this).attr('class');
    $('.'+selectedClass).addClass('group');
});​

http://fiddle.jshell.net/H3hs9/1/

诸如此类？

试试这个 

$(document).ready(function(){
        $('.someClass').on('click',function(){
            var $this = $(this);
            if($this.attr('class')=='someClass'){
            $this.addClass('group');
            }
        });
    });

我的解决方案使用打开和关闭类的方法。

.HTML

<div class="item someclass">Hello</div>
<div class="item someclass">Hello</div>
<div class="item someclass">Hello</div>
<div class="item someclass">Hello</div>
<div class="item someclass">Hello</div>
<div class="item someclass">Hello</div>

.CSS

.group{
color:green;
}​

.JS

jQuery('.item').click(function(){
    if(!jQuery(this).hasClass('group')){
    jQuery(this).addClass('group')
    }
    else
    {
    jQuery(this).removeClass('group')
    }
    });​

当您单击某些具有类"item"的元素时，它会搜索是否具有类"组"。如果为 true，则删除该类，如果为 false，则添加该类。

在带有"item"元素的div上使用单击事件，当您只想添加具有特定元素组的类时，这是很好的选择。

这里的小提琴

http://jsfiddle.net/nNS44/

假设被点击的div 只有一个类：

$('div').click(function(){
  $('.group').removeClass('group'); //assuming you want this
  $('.'+this.className).addClass('group');
});

如果他们可能有很多：

$('div').click(function(){
  $('.group').removeClass('group'); //assuming you want this
  var classes = this.className.split(/'s+/);
  var select  = $.map(classes,function(c){ return "."+c }).join();
  $(select).addClass('group');
});

 $(document).ready(function(){
        $('.someOtherClass').on('click',function(){
            $('.someClass').addClass('group');
        });
    });

JSFIDDLE ： http://jsfiddle.net/Ekx7Z/2/

尝试一些像这样的jquery：

$("#someId").click(function(){
    $("div.someClass").addclass("group");
});
相关文章：