少し問題があります。私は、各人に関する情報をロードするデータベースでwhileループを実行しようとしています。フィールドで、連絡先フォームをロードしたいのですが、初期ロード時に非表示にします。私はこれを機能させています私の問題は、ボタンをクリックすると、ボタンがクリックされたdivのみを表示したいときに、すべてのDivが表示されることです。以下は簡単な例です
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<?php
$x = 1;
while($x <= 5) {
echo '<div class ="Test_name">Hello World</div> <br>
<a href = "#" class = "Click_ME" > Click to show</a>';
$x++;
}
?>
<script>
$( document ).ready(function() {
$( ".Test_name" ).hide();
$('.Click_ME').html('TEST');
$( ".Click_ME" ).click(function() {
$( ".Test_name" ).show();
});
});
</script>
jqueryセレクターは、ボタンをクリックしたときにそれぞれのdivを指す必要があります。
を使用し$(".Click_ME").index(this)てクリックイベント内でクリックされたボタンのインデックスのインデックスを見つけることができ、それを使用するとdivはを使用して表示でき$( ".Test_name" ).eq($(".Click_ME").index(this)).show();ます。
以下のスニペットを確認してください。
$( document ).ready(function() {
$( ".Test_name" ).hide();
$( ".Click_ME" ).on('click',function() {
//$(".Click_ME").index(this) will find the index of clicked button and based on that index div can show/hide.
$( ".Test_name" ).eq($(".Click_ME").index(this)).show();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="Test_name">Hello World</div> <br>
<a href = "#" class = "Click_ME" > Click to show</a>
<br/>
<br/>
<div class ="Test_name">Hello World</div> <br>
<a href = "#" class = "Click_ME" > Click to show</a>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加