从一个div移除类，然后单击一个div添加到另一个div。

Question

我使用JQuery使小图像在点击时变得更大。

当单击包含小图像的div时，JQuery分配一个类"figure_full_demo“使其展开--当单击大型图像容器时，类将被移除。

即使在页面包含多个图像时，这也能很好地工作。如果在单击下一个小容器之前未单击大型图像容器，则会出现问题--然后我必须双击才能使其展开。

如何从大型图像容器中删除类“figure_full_demo”，并在一次单击中将其添加到小容器中？希望我的问题是清楚的贴出一些代码：

​

$('.figure').click(function() {		
  if ($('#wrapper').css('position') == 'relative'){
    $('#wrapper').css({'position':'static'});
    $('.figure').removeClass('figure_full_demo'); 
    $(this).addClass('figure_full_demo'); 
  }   
  else { 
    $('#wrapper').css({'position':'relative'});
    $('.figure').removeClass('figure_full_demo'); 
  } 
});

#wrapper   { 
  position: relative;
  width: 100%;
  max-width: 690px; 
  padding: 30px 12px 60px 12px; 
  margin: 0 auto;
  box-sizing: border-box;
  border: 2px solid green;
}
.figure {
  border: 1px solid red; 
  cursor: pointer;
}
.figure_full_demo  {
  position: absolute;
  z-index: 5000;
  left: 5%;
  right: 5%;
  width: 90%;
  background: rgba(0,0,0,0.5);
}  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="wrapper">
  <div class="figure"> 
    <img src="http://placehold.it/400x100/" alt="Pic 1">
  </div>

  <div class="figure"> 
    <img src="http://placehold.it/400x100/" alt="Pic 2">       
  </div>
</div>

​

Answer 1

我会检查用户是按下了大容器还是按下了小图像：

$(this).hasClass('figure_full_demo')

而不是检查是否有大型容器处于活动状态。

$('#wrapper').css('position') == 'relative'

类似于：

$('.figure').click(function() {     
  if ($(this).hasClass('figure_full_demo')){
    /* Large container clicked */      
    $('#wrapper').css({'position':'relative'});
    $('.figure').removeClass('figure_full_demo'); 
  } else {
    /* Small container clicked */      
    $('.figure').removeClass('figure_full_demo'); 
    $('#wrapper').css({'position':'static'});
    $(this).addClass('figure_full_demo'); 
  }
});

JSFiddle演示

​

$(document).ready(
  function() {
    $('.figure').click(function() {		
      if ($(this).hasClass('figure_full_demo')){
        /* Large container clicked */      
        $('#wrapper').css({'position':'relative'});
        $('.figure').removeClass('figure_full_demo'); 
      } else {
        /* Small container clicked */      
        $('.figure').removeClass('figure_full_demo'); 
        $('#wrapper').css({'position':'static'});
        $(this).addClass('figure_full_demo'); 
      }
    });
  }
);

#wrapper   { 
  position: relative;
  width: 100%;
  max-width: 690px; 
  padding: 30px 12px 60px 12px; 
  margin: 0 auto;
  box-sizing: border-box;
  border: 2px solid green;
}
.figure {
  border: 1px solid red; 
  cursor: pointer;
}
.figure_full_demo  {
  position: absolute;
  z-index: 5000;
  left: 5%;
  right: 5%;
  width: 90%;
  background: rgba(0,0,0,0.5);
}  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="wrapper">
  <div class="figure"> 
    <img src="http://placehold.it/400x100/&text=Pic+1" alt="Pic 1">
  </div>

  <div class="figure"> 
    <img src="http://placehold.it/400x100/&text=Pic+2" alt="Pic 2">       
  </div>
      
  <div class="figure"> 
    <img src="http://placehold.it/400x100/&text=Pic+3" alt="Pic 3">       
  </div>
      
  <div class="figure"> 
    <img src="http://placehold.it/400x100/&text=Pic+4" alt="Pic 4">       
  </div>
</div>

​

Answer 2

您可以使用.not(this)函数来从每个.figure元素中删除类(除单击的元素外)。

$('.figure').click(function() {     
    $('.figure').not(this).removeClass('figure_full_demo');
    if ($('#wrapper').css('position') == 'relative'){
            $('#wrapper').css({'position':'static'});
            $('.figure').removeClass('figure_full_demo'); 
            $(this).addClass('figure_full_demo'); 
    }   
    else { 
        $('#wrapper').css({'position':'relative'});
        $('.figure').removeClass('figure_full_demo'); 
    } 
});

Answer 3

http://jsfiddle.net/h9vc3haw/3/

$('.figure').on("click", function(){        
    $('.figure').not(this).removeClass('figure_full_demo'); 
    $(this).toggleClass('figure_full_demo');
});