Question

在线示例http://jsfiddle.net/QxdXW/ 我试图添加一个关闭按钮来删除选定的类，但是，无法得到我期望的结果。我希望关闭按钮删除selected并恢复正常的框大小。一旦下一个红色框被触发，也想关闭当前的红色框

HTML

<div class="item"><div class="close">X</div></div>

的jQuery var $ close = $（＆＃39; .close＆＃39;）;

$close.click(function(){
var $this = $(this);
   $(this).parents('.item').removeClass('selected');

});

Answer 1

我不知道此解决方案是否符合您的需求，但这是我的fiddle

    $(function(){
    var $container = $('#container'), $items = $('.item');
    var $close = $('.close');
    $close.hide()
   $(document).on('click', '.close', function(e) {
      $(this).parent('div').toggleClass('selected')
      $close.hide()
      $container.isotope('reLayout')
    });

  $container.isotope({
    itemSelector: '.item',
    masonry: {
      columnWidth: 60
    },
    getSortData : {
      selected : function( $item ){
        return ($item.hasClass('selected') ? -1000 : 0 ) + $item.index();
      }
    },
    sortBy : 'selected'
  })
  $items.click(function(){
    var $this = $(this);
    var cla=$this.attr('class')
       if(cla==="item isotope-item"){
          var what=$container.find('div.selected').attr('id')
          $('#'+what).removeClass('selected')
          $(this).addClass('selected')
          $close.show()
          $container
          .isotope( 'updateSortData', $this )
          .isotope()          
       }
  });
});

html：

<div id="container">
   <div class="item" id="a"><div class="close">X</div></div>
  <div class="item" id="b"><div class="close">X</div></div>
  <div class="item" id="c"><div class="close">X</div></div>
  <div class="item" id="d"><div class="close">X</div></div>
  <div class="item" id="e"><div class="close">X</div></div>
  <div class="item" id="f"><div class="close">X</div></div>
  <div class="item" id="g"><div class="close">X</div></div>
  <div class="item" id="h"><div class="close">X</div></div>
  <div class="item" id="i"><div class="close">X</div></div>
  <div class="item" id="l"><div class="close">X</div></div>
  <div class="item" id="m"><div class="close">X</div></div>
  <div class="item" id="n"><div class="close">X</div></div>
  <div class="item" id="o"><div class="close">X</div></div>
  <div class="item" id="p"><div class="close">X</div></div>
  <div class="item" id="q"><div class="close">X</div></div>
  <div class="item" id="r"><div class="close">X</div></div>
</div>

我不知道这个插件所以我不知道你的目标是不是这个。
如果我错了，我很抱歉你的时间浪费

同位素添加关闭按钮

1 个答案: