Question

我的代码存在问题。

当我点击阅读电子书图像1，电子书图像2，电子书图像3的div时，正在应用.active类。

我想要做的是当我点击div本身时删除.active类，它当前没有。

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

据我所知，最短的选择。使用my $cc= Customer->new(id=>92,type=>'xxxxxxx'); @emails=$cc->getEmails();优化选择器，然后在元素本身上切换类。

my $cc= Customer->new(id=>92,type=>'xxxxxxx');
@emails=$cc->emails;

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

单击元素时，使用jQuery删除另一个元素的类

4 个答案: