Question

如何为foreach循环生成的每个按钮创建特定的Jquery操作？

＆＃13;

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

＆＃13;

<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; ?>

＆＃13;

Answer 1

您的jQuery代码选择一个ID，ID在整个站点中应该是唯一的。因此，您无法在<button>标记中使用id属性。添加自定义CSS类

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

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

或添加名称属性

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

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

Answer 2

在你的php foreach中你可以生成按钮，以便id为：

DAV:principal

此时您的点击事件可以是：

PROPFIND

Answer 3

您不需要使用任何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 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>

针对foreach循环生成的每个按钮的Jquery特定操作

6 个答案: