单击元素时用 jQuery 删除另一个元素的 class

Question

我的代码有问题。

目前，当我点击 div 阅读电子书图片 1、电子书图片 2、电子书图片 3 时，正在应用 .active class。

我想做的是在单击 div 本身时删除 .active class，但它目前没有这样做。

https://fiddle.jshell.net/aerandur/v20hmy3b/

$(document).ready(function() {
  $('.one').on('click', function() {
    $('.one').removeClass('active');
    $id = "#" + $(this).addClass('active').attr('data-id');
    $('.two:not(' + $id + ')').hide();
    $($id).slideToggle();
  });
});

/* .container {
  margin: 0 auto;
}

.frame {
  max-width: 940px;
  margin: 0 auto;
}
 */
.one {
  top: 0;
  background-color: lightblue;
  z-index: 1;
  padding: 25px 10px;
  width: 30%;
  min-width: 200px;
  display: inline-block;
  cursor: pointer;
}

.two {
  background-color: yellow;
  z-index: -1;
  display: none;
}

.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="whatever-you-wanna-name top-product-list-ebbok">
  <div class="frame">
    <div class="c-3 one" data-id="p1">ebook image 1</div>
    <div class="c-3 one" data-id="p2">ebook image 2</div>
    <div class="c-3 one" data-id="p3">ebook image 3</div>
  </div>
</div>
<div class="whatever-you-wanna-name top-product-list-description">
  <div class="frame">
    <div class="two" id="p1">ebook for content image 1</div>
    <div class="two" id="p2">ebook for content image 2</div>
    <div class="two" id="p3">ebook for content image 3</div>
  </div>
</div>

Answer 1

这是一个有效的解决方案，有人可能会简化该解决方案，但它确实有效。

$(document).ready(function() {
  $('.one').on('click', function() {
    
    if(!$(this).hasClass("active")){
      $('.one').removeClass('active');
      $(this).addClass('active');      
    }
    else{
      $('.one').removeClass('active');
      }
    
    $id = "#" + $(this).attr('data-id');
    $('.two:not(' + $id + ')').hide();
    $($id).slideToggle();
  });
});

/* .container {
  margin: 0 auto;
}

.frame {
  max-width: 940px;
  margin: 0 auto;
}
 */
.one {
  top: 0;
  background-color: lightblue;
  z-index: 1;
  padding: 25px 10px;
  width: 30%;
  min-width: 200px;
  display: inline-block;
  cursor: pointer;
}

.two {
  background-color: yellow;
  z-index: -1;
  display: none;
}

.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="whatever-you-wanna-name top-product-list-ebbok">
  <div class="frame">
    <div class="c-3 one" data-id="p1">ebook image 1</div>
    <div class="c-3 one" data-id="p2">ebook image 2</div>
    <div class="c-3 one" data-id="p3">ebook image 3</div>
  </div>
</div>
<div class="whatever-you-wanna-name top-product-list-description">
  <div class="frame">
    <div class="two" id="p1">ebook for content image 1</div>
    <div class="two" id="p2">ebook for content image 2</div>
    <div class="two" id="p3">ebook for content image 3</div>
  </div>
</div>

Answer 2

是这样的吗？ https://fiddle.jshell.net/zzwctuq9/1/

$(document).ready(function() {
  $('.one').on('click', function() 
  {
   
    if (  $( this ).hasClass('active'))
    {
     $( this ).removeClass('active');
    }
    else
    {
    $( this ).addClass('active');
    }

    $id = "#" + $(this).attr('data-id');
    $($id).slideToggle();
  });  
});

/* .container {
  margin: 0 auto;
}

.frame {
  max-width: 940px;
  margin: 0 auto;
}
 */
.one {
  top: 0;
  background-color: lightblue;
  z-index: 1;
  padding: 25px 10px;
  width: 30%;
  min-width: 200px;
  display: inline-block;
  cursor: pointer;
}

.two {
  background-color: yellow;
  z-index: -1;
  display: none;
}

.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="whatever-you-wanna-name top-product-list-ebbok">
  <div class="frame">
    <div class="c-3 one" data-id="p1">ebook image 1</div>
    <div class="c-3 one" data-id="p2">ebook image 2</div>
    <div class="c-3 one" data-id="p3">ebook image 3</div>
  </div>
</div>
<div class="whatever-you-wanna-name top-product-list-description">
  <div class="frame">
    <div class="two" id="p1">ebook for content image 1</div>
    <div class="two" id="p2">ebook for content image 2</div>
    <div class="two" id="p3">ebook for content image 3</div>
  </div>
</div>

Answer 3

试试这个：

$(document).ready(function() {
    $('.one').on('click', function() {
    if(!$(this).hasClass('active')){
       $('.one').removeClass('active');
    }    
    $id = "#" + $(this).toggleClass('active').attr('data-id');
    $('.two:not(' + $id + ')').hide();
    $($id).slideToggle();
  });
});

Answer 4

据我所知，最短的选项。使用 .not(this) 优化选择器，然后切换元素本身的 class。

$(document).ready(function() {
  $('.one').on('click', function() {
    $('.one').not(this).removeClass('active');
    $id = "#" + $(this).toggleClass('active').attr('data-id');
    $('.two:not(' + $id + ')').hide();
    $($id).slideToggle();
  });
});

https://fiddle.jshell.net/v20hmy3b/10/

单击元素时用 jQuery 删除另一个元素的 class

Remove class of another element with jQuery when clicking element

jquery

addclass

removeclass

toggleclass