如何在JavaScript中使用自增ID？

Question

<script>
function show(id){
$("button").click(function(){
    $("p") .toggle();
});
});
</script>
 <?php 
    $bid=0;
    $bid=0;
    include 'model.php';
    $db=new database;
    $r=$db->msghead($admno);
    while($row= mysql_fetch_array($r))
    {
        $id=$row[0];
        $title=$row[1];
        $msg=$row[2];
        $date=$row[3];
        $sender=$row[4];
        $tit_status=$row["title_status"];
        $bid=$bid+1;
        $pid=$pid+1;
?>
<button style="width:80%;height:35px;" onclick="MessageDetailsById(<?php echo $id;?>)"   >


    <?php   
        if($tit_status=="1"){
    ?>      
        <i class="fa fa-plus-circle" aria-hidden="true" style="width:20px;float:left;"></i>  <i class="fa fa-envelope-open-o" aria-hidden="true"></i>&nbsp;<span id="active" class="sidebar-title" style="color:red;"><?php echo $title; ?></span> &nbsp;&nbsp;<?php echo $date;?>
<?php }else{?>      
        <i class="fa fa-plus-circle" aria-hidden="true" style="width:20px;float:left;"></i> <i class="fa fa-envelope-o" aria-hidden="true"></i>&nbsp;<span  id="active<?php echo $tit_status;?>" class="sidebar-title"><?php echo $title;  ?></span>    &nbsp;&nbsp;<?php echo $date;?>
<?php }?>
        </a></button>

<p style="display:none;" id="<?php echo $id; ?>">   <?php echo $msg; ?> 

      <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        Reply
      </a>

</p>
<?php } ?>

根据数据库生成了很多按钮...但是当我点击单个按钮时，所有段落都会打开，但我只想打开与其按钮相关的段落...我不知道将使用哪个ID以及如何使用???

- Yogesh Arya

Answer 1

如果您想要同时切换当前内容并隐藏所有内容，则需要更改结构并按照以下方式操作：

以下是使用您的结构的示例（您需要仔细放置动态数据）：

$('.item p').hide();

$('.item button').click(function(e){
    
    e.preventDefault();
    var $this = $(this).parent().find('p');
    $(".item p").not($this).hide();
    $this.toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item"> <!-- this is needed otherwise not possible -->
    <button>Button</button> <p>span1</p> <br>
</div>

<div class="item">
<button>Button</button> <p>span2</p><br>
</div>
    
<div class="item">
<button>Button</button> <p>span3</p><br>
</div>
    
<div class="item">
<button>Button</button> <p>span4</p><br>
</div>

参考资料：- http://jsfiddle.net/BGSyS/3/

- Alive to die - Anant

Answer 2

你正在为 p 分配ID。

<p style="display:none;" id="<?php echo $id; ?>">

所以只需将您的jQuery代码更改为以下内容：

  function MessageDetailsById(id){
    $("button").click(function(){
      $("#"+id) .toggle();
    });
  }

- Nico

---

但是我的程序怎么知道我按了哪个按钮？ - Yogesh Arya

<script> $(document).ready(function(){ $("button").click(function(){ $("p") .toggle(); }); }); </script> - Yogesh Arya

Answer 3

尝试类似以下的内容：

<button ... data-id="<?php echo $id; ?>" ...>...</button>
<p ... data-id="<?php echo $id; ?>" ...>...</p>

然后在单击时执行类似以下操作：

$('button').click(function(){
    $('p').find("[data-id='" + $(this).data('id') + "']").toggle();
});

我没有测试过，但我在我的程序中使用了这个案例来处理动态元素。

- Jake Anstey