从一个div中删除类，并在一次单击中添加到另一个div

Question

我使用JQuery在点击时使小图片更大。

当点击包含小图像的div时，JQuery会分配一个类＆＃34; figure_full_demo＆＃34;这使它扩展 - 当点击大图像容器时，类被删除。

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

如何删除课程＆＃39; figure_full_demo＆＃39;从大型图像容器中，只需点击一下即可将其添加到小容器中？ 希望我的问题很清楚 - 发布一些代码：

＆＃13;

＆＃13;

$('.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'); 
  } 
});

＆＃13;

#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);
}  

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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 Demo

$(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');
});