wie man mehrere IDs in Ready-Funktion mit einer einzigen Schleife in JavaScript ausblenden?

Question

Ich wollte es als Schleife für diese bereite Funktion machen, aber ich landete wie dies zu tun:

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

keine Schleife anwenden. Verwenden Sie übereinstimmende Attributauswahlelemente für Teilzeichenfolgen.

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

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

Answer 3

können Sie ordnen das Element show() und hide() mit benutzerdefinierten data-* Präfix-Attribut zu sein, die .data(key) mit erneut versucht werden kann.

Mit diesem können Sie den Klassenselektor verwenden, um den Ereignishandler zu binden.

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

for-Schleife mit diesem versuchen wird es Ihnen helfen

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