Question

场景：我创建了一个简单的显示/隐藏功能，允许用户点击IMG并显示后续内容。

预期行为：当用户点击IMG .service-img时，我希望选定的IMG内容.service-content到.addClass('fadeIn'); .removeClass('fadeIn'); .addClass('fadeIn'); 1}}来自之前选择/可见的内容。

问题虽然条件在.removeClass('fadeIn');成功，但在.service-content时失败。.service-img似乎将该类添加到所有if ($('.service-content').is(':visible')) .addClass etc...单击。

我的假设： 虽然我问.service-content但我永远无法真正删除该课程，因为技术上.service-img始终可见{{1}单击。

问题： 如何正确编写条件以检查 当前所选元素 {{1无论所有内容元素是否共享相同的类名，都执行函数。

一些半成功的尝试

.is(':visible')

以下是完整的原型：JS Fiddle

Answer 1

我认为在显示新选择的元素之前，您需要先删除之前的元素。即removeClass应该在addClass之前。

$('.service-content').removeClass('fadeIn');    //Assuming this will remove class fadeIn from all elements.
$('.service-content').eq($(this).index()).show();
if ($('.service-content').eq($(this).index()).is(':visible')) {
        $('.service-content').eq($(this).index()).addClass('fadeIn')
      }

Answer 2

您不需要检查元素是否可见。我猜这可以解决问题。

https://jsfiddle.net/3fbzrto0/30/

$('.service-img').on('click', function(){
    var index = $(this).index();
    var content = $('.service-content').eq(index);
    //hide all visible elements
    $('.service-content').hide();
    $('.service-content').removeClass('fadeIn');

    content.show();
    content.addClass('fadeIn');
});

使用.removeClass（）的条件语句;在.show（）;和.hide（）;功能

2 个答案: