Estoy tratando de pasar de <ul class="click-to-section"> a la clase de tester donde quiero recorrer los niños que tienen data-section y solo mostrarlo si coincide con <ul class="click-to-section">
Vea la captura de pantalla del HTML de las herramientas de desarrollo de Google: https://ibb.co/Y3g1jmC
mi código para mostrar esto está a continuación:
$(".click-to-section li").click(function() { $(this).each(function(){ let testdata = $(this).data('section'); let testdata2 = $(this).closest("main").next().next().children(); $(testdata2).each(function(){ const dataSection = $(this).data("section"); console.log(dataSection); }); }); });HTML
<ul class="click-to-section"> <li data-section="videos">Videos</li> **When this is clicked** <li data-section="lo">Learning objectives</li> <li data-section="credits">Credit</li> <li data-section="toolkits">Toolkit</li> </ul> <div class="opinions"></div> <div class="tester"> **Needs to traverse to this div and loop through the children to show the sections one at a time based on the data-section in the ul menu to equal the data-section here ** <div data-section="credits" class="js-tabs" style="display: none;"</div> <section data-section="videos" class="js-tabs"></section> <div class="js-tabs" data-section="lo" style="display: none;"></div> <div data-section="toolkits" class="js-tabs" style="display: none;"></div> </div>Se actualizó el código para hacer clic en li y mostrar elementos de prueba que coincidan con los atributos de datos de li en el que se hizo clic
Código de trabajo a continuación
$(".click-to-section li").on("click", function() { var dataSection = $(this).attr("data-section"); $(".tester > *").hide(); $(".tester [data-section=" + dataSection + "]").show(); }) li { cursor: pointer } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="click-to-section"> <li data-section="videos">Videos</li> **When this is clicked** <li data-section="lo">Learning objectives</li> <li data-section="credits">Credit</li> <li data-section="toolkits">Toolkit</li> </ul> <div class="opinions"></div> <div class="tester"> <div data-section="credits" class="js-tabs">cred </div> <section data-section="videos" class="js-tabs">video</section> <div class="js-tabs" data-section="lo">lo</div> <div data-section="toolkits" class="js-tabs">js tabs</div> </div>