Question

我有FIDDLE

$('body').click(function() {
   $('#moreinfo').addClass('hidden');
   $('.trigger').parent().removeClass('active');
});

$('#moreinfo').addClass('hidden');
$('.portfoliotile .description').addClass('hidden');

$('.trigger').click(function(e){
    e.stopPropagation();
    $('#moreinfo').removeClass('hidden');
    $(this).parent().addClass('active');
    $('#details').html($(this).parent().find('.description').html());

});

$('#closegall').click(function(){
    $('#moreinfo').addClass('hidden');
    $('.portfoliotile').removeClass('dark');
});

单击红色框图像时，该红色框中的文本将显示在黄色框中。此外，当您单击红色框图像时，“活动”类将添加到红色框中，从而更改其不透明度。

然而，当你点击第二个红色框时，第一个红色框仍然保持“活动”类，所以现在，两个红色框都有这个“活动”类。

我希望一次只有一个“活跃”课程，无论你点击哪个红色框都应该是“活跃”课程。

如果你能告诉我一个更新的小提琴，那我将非常感激，因为我正在学习！

Answer 1

当您使用.portfoliotile点击.trigger时，您可以从所有$('.portfoliotile').removeClass('active')元素中删除有效课程：

$('.trigger').click(function(e) {
  e.stopPropagation();
  $('.portfoliotile').removeClass('active')
  $('#moreinfo').removeClass('hidden');
  $(this).parent().addClass('active');
  $('#details').html($(this).parent().find('.description').html());
});

<强> jsFiddle example

更新div中的内容，点击另一个div

1 个答案: