Question

0

72

Views

How can I loop through a string array and only get the value of the data attribute that is clicked on

I am trying to get from the <ul class="click-to-section"> to the tester class where I want to loop over the children that has data-section and only show it if it matches up with the <ul class="click-to-section">

See the screenshot of the HTML from Google Dev tools - https://ibb.co/Y3g1jmC

my code to show this is below:

$(".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>

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-03T14:45:14.647Z

Updated the code to click on li and show tester elements that matches data attributes of clicked li

Working Code below

$(".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>