javascript - How to use multiple IDs in one function

Question

How to use it on multiple ids such that when #more1 is clicked , #details1 will appear. And when #more2 is clicked , #details2 will appear? Note that I want it only using one function. Thank U.

$(document).ready(function () {
    $('#more1,#more2').click(function () {
        $('#details1,#details2').slideToggle();
    });
});

question from:https://stackoverflow.com/questions/65921307/how-to-use-multiple-ids-in-one-function

Answer 1

You can use a more general selector: $('[id^="more"]'). This will select all items that have an id that starts with "more", and will have a click event tied to them.

Then you can use the number in the id property and use it to build the id of the target.

$('[id^="more"]').click(function()
{
    let id = $(this).attr('id');
    let num = /d+/.exec(id)[0];
    $('#details' + num).slideToggle();                  
});

$(document).ready(function()
{
    $('[id^="more"]').click(function()
    {
        let id = $(this).attr('id');
        let num = /d+/.exec(id)[0];
        $('#details' + num).slideToggle();                  
    });    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <button id="more1">One</button>
  <span id="details1">Each Section</span>
</div>
<div>
  <button id="more2">Two</button>
  <span id="details2">Is Independent</span>
</div>
<div>...</div>
<div>
  <button id="more25">Twenty Five</button>
  <span id="details25">Of all the others</span>
</div>