Question

如果#filters可见，我试图交换图像，但它不起作用，控制台没有错误......

$(document).ready(function(){
  $("#filter-options :checkbox").click(function(){
    $("#product-list li").hide();
    $("#filter-options :checkbox:checked").each(function(){
      $("." + $(this).val()).fadeIn();
    });

    if($('#filter-options :checkbox').filter(':checked').length < 1){
      $("#product-list li").fadeIn();
    }
  });

  $('.col').on('click', function(){

    $('#filters').slideToggle(200);

    if($('#filters').is(':visible')){
      $('.col').attr('src','http://www.asus.com/media/images/close_round.png');
    }

    else{
      $('.col').attr('src','http://www.asus.com/media/images/open_round.png');
    }

  })
});

http://jsfiddle.net/594yj9uL/9/

Answer 1

由于slideToggle()，如果是slideToggle()，您需要使用完整的回调选项检查动画的可见性和结束

$('.col').on('click', function () {

    $('#filters').slideToggle(200, function(){
        console.log($(this).is(':visible'))
        if ($(this).is(':visible')) {
            $('.col').attr('src', 'http://www.asus.com/media/images/close_round.png');
        } else {
            $('.col').attr('src', 'http://www.asus.com/media/images/open_round.png');
        }
    });
})

演示：Fiddle

Answer 2

问题在于这一行：

$('#filters').slideToggle(200);

因为要隐藏元素需要200ms，所以剩下的代码会执行并找到仍然可见的元素。

如果你在setTimeout包裹下一位，你将解决问题。

$('.col').on('click', function(){
    $('#filters').slideToggle(200);

    setTimeout(function(){
        alert( $('#filters').is(':visible') );

        if($('#filters').is(':visible')){
            $('.col').attr('src','http://www.asus.com/media/images/close_round.png');
        }else{
            $('.col').attr('src','http://www.asus.com/media/images/open_round.png');
        }
    },500);
});

jsFiddle Demo

Answer 3

**FIDDLE**

中的工作示例

主要是将条件放入slideToggle回调函数

的Javascript

if($('#filter-options :checkbox').filter(':checked').length < 1){
  $("#product-list li").fadeIn();
}

$('.col').on('click', function(){
  var self = $(this); 
  $('#filters').slideToggle(200, function(){          
    if($('#filters').is(':visible')){
      self.attr('src','http://www.asus.com/media/images/close_round.png');
    } else {
      self.attr('src','http://www.asus.com/media/images/open_round.png');
    }
  });
});

如果div可见，则无法在点击时交换图像

3 个答案:

的Javascript