使用 .removeClass() 的条件语句；在 .show();和.hide();功能

Question

场景： 我创建了一个简单的 Show/Hide 函数，允许用户单击 IMG 并显示后续内容。

预期行为：当用户点击 IMG 时，.service-img，我想将所选 IMG 内容.service-content，改为[=13] =] 而 .removeClass('fadeIn'); 来自之前的 selected/visible 内容。

问题： 尽管条件在 .addClass('fadeIn'); 成功，但在 .removeClass('fadeIn'); 失败似乎将 class 添加到所有 .service-content 当 .service-img 被点击时。

我的假设： 虽然我在问 if ($('.service-content').is(':visible')) .addClass etc... 我永远无法真正删除 class 因为技术上单击 .service-img 时，.service-content 始终可见。

问题：如何正确编写条件语句来检查当前是否选中element .is(':visible') 然后执行函数，不管所有内容元素是否共享相同的 class 名称。

几次半成功的尝试

// Function Attempt 1 shows .service-content but adds .fadeIn 
// to .service-img so service content never Fades Into view  
$('.service-content').hide();
$('.service-content:first-child').show();
$('.service-img').click(function() {
  $('.service-content').hide(); 
  $('.service-content').eq($(this).index()).show();
  if ($('.service-content').is(':visible')) {
    $(this).addClass('fadeIn')
  } else {
    $(this).removeClass('fadeIn');
  }
});

// Function Attempt 2
$('.service-content').hide();
$('.service-content:first-child').show();
$('.service-img').click(function() {
  $('.service-content').hide(); 
  $('.service-content').eq($(this).index()).show();
  if ($('.service-content').is(':visible')) {
    $('.service-content').addClass('fadeIn')
  } else {
    $('.service-content').removeClass('fadeIn');
  }
});

// Function Attempt 3
$('.service-content').hide();
$('.service-content:first-child').show();
$('.service-img').click(function() {
  $('.service-content').hide(); 
  $('.service-content').eq($(this).index()).show();
  if ($('.service-content').eq($(this).index()).is(':visible')) {
    $('.service-content').eq($(this).index()).addClass('fadeIn')
  } else {
    $('.service-content').eq($(this).index()).removeClass('fadeIn');
  }
});

这是完整的原型：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();功能

Conditional statement using .removeClass(); in a .show(); and .hide(); function

jquery

conditional

show-hide