单击另一个div时更新div中的内容 [英] Update content in div, on click of another div

问题描述

我有这个 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');
});

当您单击红色框图像时，该红色框中的文本会显示在黄色框中.同样，当您单击红色框图像时，会向红色框添加一个活动"类，从而更改其不透明度.

When you click on a red box image, text from that red box appears in the yellow box. Also when you click on the red box image, an 'active' class is added to the red box, changing its opacity.

但是，当您单击第二个红色框时，第一个红色框仍保持活动"类别，因此，现在，两个红色框都具有活动"类别.

However, when you click on a second red box, the first red box still keeps the 'active' class, so now, both red boxes have this 'active' class.

我一次只希望有一个活动"课程，无论您单击哪个红色框都应该是活动"课程.

I want to only have one 'active' class present at a time, whichever red box you click on should be the 'active' one.

如果您可以向我展示更新的小提琴，在我学习时，将不胜感激！

If you can show me on an updated fiddle, that would be greatly appreciated as I'm learning!

推荐答案

单击带有$('.portfoliotile').removeClass('active')的.trigger时，您可以从所有.portfoliotile元素中删除活动类:

You can just remove the active class from all the .portfoliotile elements when you click on a .trigger with $('.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示例

jsFiddle example

这篇关于单击另一个div时更新div中的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！