由foreach循環生成的每個按鈕的Jquery特定操作

Question

如何爲由foreach循環生成的每個按鈕創建特定的Jquery操作？

<script type="text/javascript"> 
 
$(document).ready(function() { 
 
    $("#numero").hide(); 
 
    $("#shownum").click(function(){ 
 
    $("#numero").toggle(); 
 
    }); 
 
}); 
 
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<?php foreach ($annonces as $key => $annonce) : ?> 
 
<button type="button" class="btn btn-primary btn-xs" id="shownum"> <span class=" glyphicon glyphicon-earphone" aria-hidden="true"> </span> show/hide</button> 
 
<div id="numero"> 
 
    <?php echo $annonce['Annonce']['title'] ;?> 
 
</div> 
 
<?php endforeach; ?>

Answer 1

你不需要使用任何data-attr或ids它過於複雜，而不是你應該使用class而不是使用id，並正確使用jquery遍歷選擇元素。

<?php foreach ($annonces as $key => $annonce) : ?> 
<button type="button" class="btn btn-primary btn-xs shownum_class"> <span class=" glyphicon glyphicon-earphone" aria-hidden="true"> </span> show/hide</button> 
<div class="numero_class"> 
    <?php echo $annonce['Annonce']['title'] ;?> 
</div> 
<?php endforeach; ?> 

我增加了類和刪除所有id

$(document).ready(function() { 
    $(".numero_class").hide(); 
    $(".shownum_class").click(function(){ 
    $(this).next(".numero_class").toggle(); 
    }); 
}); 

論shownum_class點擊，它就會選擇下一個元素numero_class這將是具體到每一個按鈕，然後只需撥動它。

Answer 2

jQuery代碼選擇一個ID和ID應該是整個網站是唯一的。因此，您不能在您的<button>標記中使用id屬性。無論是添加自定義CSS類

<button ... class="... my-button" 

$(".my-button").click(... 

或添加name屬性，而不是

<button ... name="shownum" ... 

$("button[name=shownum]").click(... 

Answer 3

裏面你的PHP的foreach可以生成的按鈕，這樣的ID是：

<button type="button" class="btn btn-primary btn-xs" id="shownum<?php echo $value['description'] ?>"> 

此時您的點擊事件可以是：

$('[id^="shownum"]').click(function(e){ 
    $(this).toggle(); 
}); 

Answer 4

試試這個： 的PHP和HTML代碼：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<?php $i = 0; foreach ($annonces as $key => $annonce) : ?> 
<button type="button" class="btn btn-primary btn-xs" class="shownum" data-target = <?php echo"'".$i."'"; ?>> <span class=" glyphicon glyphicon-earphone" aria-hidden="true"> </span> show/hide</button> 
<div id= <?php echo "numero".$i; ?> class="hideOnLoad" > 
    <?php echo $annonce['Annonce']['title'] ; $i++;?> 
</div> 
<?php endforeach; ?> 

的JavaScript：

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".hideOnLoad").hide(); 
    $(".shownum").click(function(){ 
    $("#numero"+ $(this).data('target')).toggle(); 
    }); 
}); 
</script> 

Answer 5

試試這個： -

<?php foreach ($annonces as $key => $annonce) : ?> 
    <button type="button" class="btn btn-primary btn-xs shownum"> 
    <span class=" glyphicon glyphicon-earphone" aria-hidden="true">show/hide</spavn> 
    </button> 
    <div class="numero"> 
    <?php echo echo $annonce['Annonce']['title'] ;?> 
    </div> 
<?php endforeach; ?> 

JS： -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    (function(){ 
    $("div.numero").hide(); 
    $("button.shownum").click(function(){ 
     var $this=$(this).next('div.numero'); 
     $this.toggle(); 
     return false; 
     }); 
    })(); 
</script> 

Answer 6

您應該使用class屬性而不是id屬性並將整個內容包裝在容器內。

<?php foreach ($annonces as $key => $annonce) : ?> 
    <div class="wrapper"> 
    <button type="button" class="btn btn-primary btn-xs show-title" > <span class=" glyphicon glyphicon-earphone" aria-hidden="true"> </span> show/hide</button> 
    <div class="title-content"> 
     <?php echo $annonce['Annonce']['title'] ;?> 
    </div> 
    </div> 
<?php endforeach; ?> 

這是用於切換它的jQuery代碼。

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".title-content").hide(); 
    $(".show-title").click(function(){ 
     $(this).parent(".wrapper").find(".title-content").toggle(); 
    }); 
}); 
</script>