jQuery each() 在里面不能使用 click() 工作

Question

我创建了一个简单的三联画。我遇到的问题是，当您单击三联画的第一个选项卡时，您会看到该选项卡的内容和其他第一个选项卡的内容。很抱歉包含所有 JS 代码，但我必须这样做才能让它在代码片段上工作。问题出在$(this).find('.tab').click(function ()});内部。谢谢！

$(document).ready(function () {
	$(".triptych").each(function () { 
		$(this).find('.field--name-field-topic-1-icon, .field--name-field-topic-1-title').wrapAll('<div class="iconContainer iconContainer1"> </div>');
		$(this).find('.field--name-field-topic-2-icon, .field--name-field-topic-2-title').wrapAll('<div class="iconContainer iconContainer2"></div>');
		$(this).find('.field--name-field-topic-3-icon, .field--name-field-topic-3-title').wrapAll('<div class="iconContainer iconContainer3"></div>');
	
		$(this).find('.iconContainer').wrapAll('<div class="iconsContainer"> </div>');
	
		$(this).find('.iconContainer1').wrap('<a role="button" class="topic1-filter tab" data-tabid="topic1"></a>');
		$(this).find('.iconContainer2').wrap('<a role="button" class="topic2-filter tab" data-tabid="topic2"></a>');
		$(this).find('.iconContainer3').wrap('<a role="button" class="topic3-filter tab" data-tabid="topic3"></a>');
	
		$(this).find('.field--name-field-topic-1-content, .field--name-field-topic-2-content, .field--name-field-topic-3-content').wrapAll('<div class="tripctychContent-container"></div>');
		$(this).find('.field--name-field-topic-1-content, .field--name-field-topic-2-content, .field--name-field-topic-3-content').addClass('hideText');
	
		$(this).find('.field--name-field-topic-1-content').attr("data-blockid", "topic1");
		$(this).find('.field--name-field-topic-2-content').attr("data-blockid", "topic2");
		$(this).find('.field--name-field-topic-3-content').attr("data-blockid", "topic3");
	
		$(this).find('.field--name-field-topic-1-content').append('<span class="triangle triangle1"></span>');
		$(this).find('.field--name-field-topic-2-content').append('<span class="triangle triangle2"></span>');
		$(this).find('.field--name-field-topic-3-content').append('<span class="triangle triangle3"></span>');
	});
	$('.triptych .iconContainer .field--type-text-long').append('<p class="iconContainerMore">More</p>');
	$(".triptych").each(function () { 
		$(this).find('.tab').click(function () {
		
			var tabID = $(this).data('tabid');
			var isCurrent = !$(this).hasClass('current');
			
			$('.tab').removeClass('current');
			$(this).toggleClass('current', isCurrent);
	
			$('.iconContainerMore').removeClass('hideMoreText');
			$('.iconContainerMore', this).toggleClass('hideMoreText', isCurrent);
	
			$('.tripctychContent-container>div').removeClass('showTopicContent');
			$('.tripctychContent-container').find("[data-blockid=" + tabID + "]").toggleClass('showTopicContent', isCurrent);
		});
	 });
});

.field--name-field-topic-2-content,.field--name-field-topic-3-content,.field--name-field-topic-1-content {
display: none;
}
.showTopicContent {
display: block;
}
.hideMoreText {
display: none;
}
.iconsContainer {display: flex;justify-content: space-between;}
p{text-align: center;}
.iconsContainer a {flex: 1; margin-right: 5px;}
.triptych img { width:50px;margin: 0 auto;display: block;height:50px;}
.field--name-field-topic-1-content, .field--name-field-topic-2-content,.field--name-field-topic-3-content{background:red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="triptych">
<div class="inner">
<div class="field--name-field-topic-1-icon"><img src="https://fakeimg.pl/300/" ></div>
<div class="field--name-field-topic-1-title field--type-text-long"><p>Topic 1 title</p></div>
<div class="field--name-field-topic-2-icon"><img src="https://fakeimg.pl/300/" ></div>
<div class="field--name-field-topic-2-title field--type-text-long"><p>Topic 2 title</p></div>
<div class="field--name-field-topic-3-icon"> <img src="https://fakeimg.pl/300/" ></div>
<div class="field--name-field-topic-3-title field--type-text-long"><p>Topic 3 title</p></div>
<div class="field--name-field-topic-1-content"><p>Topic 1 content...</p></div>
<div class="field--name-field-topic-2-content"><p>Topic 2 content...</p></div>
<div class="field--name-field-topic-3-content"><p>Topic 3 content...</p></div>
</div>
</div>
<div class="triptych">
<div class="inner">
<div class="field--name-field-topic-1-icon"><img src="https://fakeimg.pl/300/" ></div>
<div class="field--name-field-topic-1-title field--type-text-long"><p>Triptick 2 Topic 1 title</p></div>
<div class="field--name-field-topic-2-icon"><img src="https://fakeimg.pl/300/" ></div>
<div class="field--name-field-topic-2-title field--type-text-long"><p>Triptick 2 Topic 2 title</p></div>
<div class="field--name-field-topic-3-icon"> <img src="https://fakeimg.pl/300/" ></div>
<div class="field--name-field-topic-3-title field--type-text-long"><p>Triptick 2 Topic 3 title</p></div>
<div class="field--name-field-topic-1-content"><p>Triptick 2 Topic 1 content...</p></div>
<div class="field--name-field-topic-2-content"><p> Triptick 2Topic 2 content...</p></div>
<div class="field--name-field-topic-3-content"><p>Triptick 2 Topic 3 content...</p></div>
</div>
</div>

Answer 1

不确定，但你想要这样的东西？

$(document).ready(function () {
	$(".triptych").each(function () { 
		$(this).find('.field--name-field-topic-1-icon, .field--name-field-topic-1-title').wrapAll('<div class="iconContainer iconContainer1"> </div>');
		$(this).find('.field--name-field-topic-2-icon, .field--name-field-topic-2-title').wrapAll('<div class="iconContainer iconContainer2"></div>');
		$(this).find('.field--name-field-topic-3-icon, .field--name-field-topic-3-title').wrapAll('<div class="iconContainer iconContainer3"></div>');
	
		$(this).find('.iconContainer').wrapAll('<div class="iconsContainer"> </div>');
	
		$(this).find('.iconContainer1').wrap('<a role="button" class="topic1-filter tab" data-tabid="topic1"></a>');
		$(this).find('.iconContainer2').wrap('<a role="button" class="topic2-filter tab" data-tabid="topic2"></a>');
		$(this).find('.iconContainer3').wrap('<a role="button" class="topic3-filter tab" data-tabid="topic3"></a>');
	
		$(this).find('.field--name-field-topic-1-content, .field--name-field-topic-2-content, .field--name-field-topic-3-content').wrapAll('<div class="tripctychContent-container"></div>');
		$(this).find('.field--name-field-topic-1-content, .field--name-field-topic-2-content, .field--name-field-topic-3-content').addClass('hideText');
	
		$(this).find('.field--name-field-topic-1-content').attr("data-blockid", "topic1");
		$(this).find('.field--name-field-topic-2-content').attr("data-blockid", "topic2");
		$(this).find('.field--name-field-topic-3-content').attr("data-blockid", "topic3");
	
		$(this).find('.field--name-field-topic-1-content').append('<span class="triangle triangle1"></span>');
		$(this).find('.field--name-field-topic-2-content').append('<span class="triangle triangle2"></span>');
		$(this).find('.field--name-field-topic-3-content').append('<span class="triangle triangle3"></span>');
	});
	$('.triptych .iconContainer .field--type-text-long').append('<p class="iconContainerMore">More</p>');
	$(".triptych").each(function () { 
		$(this).find('.tab').click(function () {
		
			var tabID = $(this).data('tabid');
			var isCurrent = !$(this).hasClass('current');
			
			$('.tab').removeClass('current');
			$(this).toggleClass('current', isCurrent);
	
			$(this).parent().parent().find('.iconContainerMore').removeClass('hideMoreText');
			$('.iconContainerMore', this).toggleClass('hideMoreText', isCurrent);
	
			$(this).parent().parent().find('.tripctychContent-container>div').removeClass('showTopicContent');
			$(this).parent().parent().find("[data-blockid='" + tabID + "']").toggleClass('showTopicContent', isCurrent); // changes
		});
	 });
});

.field--name-field-topic-2-content,.field--name-field-topic-3-content,.field--name-field-topic-1-content {
display: none;
}
.showTopicContent {
display: block;
}
.hideMoreText {
display: none;
}
.iconsContainer {display: flex;justify-content: space-between;}
p{text-align: center;}
.iconsContainer a {flex: 1; margin-right: 5px;}
.triptych img { width:50px;margin: 0 auto;display: block;height:50px;}
.field--name-field-topic-1-content, .field--name-field-topic-2-content,.field--name-field-topic-3-content{background:red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="triptych">
<div class="inner">
<div class="field--name-field-topic-1-icon"><img src="https://fakeimg.pl/300/" ></div>
<div class="field--name-field-topic-1-title field--type-text-long"><p>Topic 1 title</p></div>
<div class="field--name-field-topic-2-icon"><img src="https://fakeimg.pl/300/" ></div>
<div class="field--name-field-topic-2-title field--type-text-long"><p>Topic 2 title</p></div>
<div class="field--name-field-topic-3-icon"> <img src="https://fakeimg.pl/300/" ></div>
<div class="field--name-field-topic-3-title field--type-text-long"><p>Topic 3 title</p></div>
<div class="field--name-field-topic-1-content"><p>Topic 1 content...</p></div>
<div class="field--name-field-topic-2-content"><p>Topic 2 content...</p></div>
<div class="field--name-field-topic-3-content"><p>Topic 3 content...</p></div>
</div>
</div>
<div class="triptych">
<div class="inner">
<div class="field--name-field-topic-1-icon"><img src="https://fakeimg.pl/300/" ></div>
<div class="field--name-field-topic-1-title field--type-text-long"><p>Triptick 2 Topic 1 title</p></div>
<div class="field--name-field-topic-2-icon"><img src="https://fakeimg.pl/300/" ></div>
<div class="field--name-field-topic-2-title field--type-text-long"><p>Triptick 2 Topic 2 title</p></div>
<div class="field--name-field-topic-3-icon"> <img src="https://fakeimg.pl/300/" ></div>
<div class="field--name-field-topic-3-title field--type-text-long"><p>Triptick 2 Topic 3 title</p></div>
<div class="field--name-field-topic-1-content"><p>Triptick 2 Topic 1 content...</p></div>
<div class="field--name-field-topic-2-content"><p> Triptick 2Topic 2 content...</p></div>
<div class="field--name-field-topic-3-content"><p>Triptick 2 Topic 3 content...</p></div>
</div>
</div>