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>