如何在javaScript中使用單一循環顯示隱藏多個ids'的準備功能？

Question

我想讓它作爲這個準備功能的循環，但我最終做這樣的：

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

不要使用循環。使用子字符串匹配的屬性選擇器。

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

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

Answer 3

您可以關聯的元素show()和hide()使用自定義data-*前綴屬性，可以使用.data(key)重試是。

使用它你可以使用類選擇器來綁定事件處理程序。

HTML

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

腳本

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

Answer 4

嘗試用for循環它會幫助你

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