comment afficher masquer plusieurs ID dans la fonction prête avec une seule boucle dans javaScript?

Question

Je voulais faire comme une boucle pour cette fonction prête mais je fini par faire comme ceci:

$(document).ready(function() { 

    $('#p1-show').click(function() { $('#p1').show(); }); 
    $('#p1-hide').click(function() { $('#p1').hide(); }); 

    $('#p2-show').click(function() { $('#p2').show(); }); 
    $('#p2-hide').click(function() { $('#p2').hide(); }); 

    $('#p3-show').click(function() { $('#p3').show(); }); 
    $('#p3-hide').click(function() { $('#p3').hide(); }); 

    $('#p4-show').click(function() { $('#p4').show(); }); 
    $('#p4-hide').click(function() { $('#p4').hide(); }); 

    //there will be ids' for 300+ show hide 

}); 

Answer 1

$(document).ready(function() { 
    for(var i =1; i< 5; i++){ 
     $(`#p${i}-show`).click(function() { $(`#p${i}`).show(); }); 
     $(`#p${i}-hide`).click(function() { $(`#p${i}`).hide(); }); 
    } 
    }); 

Answer 2

Ne pas utiliser une boucle. Utilisez des sélecteurs d'attribut correspondant à la sous-chaîne.

$("[id$=show]").on("click", function() { 
    $("#" + this.id.replace("-show", "")).show(); 
}): 

$("[id$=hide]").on("click", function() { 
    $("#" + this.id.replace("-hide", "")).hide(); 
}): 

Answer 3

Vous pouvez associer l'élément à show() et hide() utilisant l'attribut data-* personnalisée préfixée, qui peut être rejugé en utilisant .data(key). En l'utilisant, vous pouvez utiliser Class Selector pour lier le gestionnaire d'événements.

HTML

<button class="show" data-target="#p1">show p1<button> 
<button class="hide" data-target="#p1">hide p1<button> 

Script

$(document).ready(function() { 
    $('.show').click(function() { 
     $(this).data('target').show(); 
    }); 
    $('.hide').click(function() { 
     $(this).data('target').hide(); 
    }); 
}) 

Answer 4

essai avec cette boucle, il vous aidera à

$(document).ready(function() { 
 

 
    for (var i = 0; i <= 300; i++) { 
 
    $('#p' + i + '-show').click(function() { 
 
     $('#p' + i).show(); 
 
    }); 
 
    $('#p' + i + '-hide').click(function() { 
 
     $('#p' + i).hide(); 
 
    }); 
 
    } 
 
    /* $('#p1-show').click(function() { $('#p1').show(); }); 
 
    $('#p1-hide').click(function() { $('#p1').hide(); }); 
 

 
    $('#p2-show').click(function() { $('#p2').show(); }); 
 
    $('#p2-hide').click(function() { $('#p2').hide(); }); 
 

 
    $('#p3-show').click(function() { $('#p3').show(); }); 
 
    $('#p3-hide').click(function() { $('#p3').hide(); }); 
 

 
    $('#p4-show').click(function() { $('#p4').show(); }); 
 
    $('#p4-hide').click(function() { $('#p4').hide(); }); 
 

 
    //there will be ids' for 300+*/ 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>