从html元素中删除类

时间:2012-07-23 12:14:50

标签: jquery

在按钮1的单击事件中,如何仅从此部分中删除“已选择”类。不应删除按钮2的类,按钮2也是如此,如果单击按钮2,如果选择的类存在,则不应删除按钮1的类。我知道$('.small-button-1, .small-button-2').removeClass('selected');删除了所有内容。

<div class="block">
    <div id="abcd" class="lg_button">Button 1</div>
    <div>
        <div class="small-button-1 selected">1</div>
        <div class="small-button-2 selected">2</div>
    </div>
</div> 

<div class="block">
    <div id="dcba" class="lg_button">Button 2</div>
    <div>
        <div class="small-button-1 selected">1</div>
        <div class="small-button-2 selected">2</div>
    </div>
</div> 

2 个答案:

答案 0 :(得分:1)

我已经这样做了但是必须重命名一些html标签才能让它在这里工作是我的榜样 http://jsfiddle.net/fKwGR/

jquery部分:

$(document).ready(function() {
$('div.lg_button1').click(function(){
        $('div.small-button-1.selected').attr('class','small-button-1');
        $('div.small-button-2.selected').attr('class','small-button-2');
        $('div.small-button-3').attr('class','small-button-3 selected');
        $('div.small-button-4').attr('class','small-button-4 selected');
        });
$('div.lg_button2').click(function(){
        $('div.small-button-1').attr('class','small-button-1 selected');
        $('div.small-button-2').attr('class','small-button-2 selected');
        $('div.small-button-3.selected').attr('class','small-button-3');
        $('div.small-button-4.selected').attr('class','small-button-4');
        });
});​

HTML部分:

<div class="block">
  <div id="abcd" class="lg_button1">Button 1</div>
  <div id='button1'>
      <div class="small-button-1 selected">1</div>
      <div class="small-button-2 selected">2</div>
  </div>

<div class="block">
  <div id="dcba" class="lg_button2">Button 2</div>
  <div id='button2'>
      <div class="small-button-3 selected">1</div>
      <div class="small-button-4 selected">2</div>
  </div>

答案 1 :(得分:0)

我相信您需要掌握父元素,然后将其用作选择器的上下文。像http://jsfiddle.net/VY5Md/之类的东西应该达到我想要的目标

  $(function(){
       $('.lg_button').click(function(){
           var $p = $(this).parents('.block');
           $('.selected', $p).removeClass('selected'); 
       }); 
  });​

此代码获取单击的按钮,找到具有类&#34;阻止&#34;的父级。然后删除班级&#34;选择&#34;从任何与班级#34;选择&#34;在&#34;块&#34;

的上下文中