javascript - 使用与按钮 ID 相同的 ID

Question

我一直在尝试做到这一点，以便每当我在一个 div 中单击时 id="slide$i" 单击的 div 应该展开或折叠，具体取决于当前表单。

这是它的外观截图。

所以基本上如果我点击第一个 div 的区域(从 Magazijn 到 Guidion) 它应该展开并显示其他信息。但我们暂时保持简单，只是尝试让 div 完全移动。

我的代码是这样的。

  $i = 0;
foreach($stock_history as $history){
    echo " 
    <div id='slide" . $i . "' >
        <p>Date: <strong> " . $history->create_date . "</strong> </p> 
        <p>To: <strong> " . $history->toLocation->name . " </strong> </p> 
        <p>From: <strong> " . $history->fromLocation->name . " </strong> </p>
        <p>Moved by:  <strong> " .  $history->user->username . " </strong> </p>
        <hr />
    </div>";
    $i++;
};

Javascript:

$("#slide'.$i.'").click(function(){
    if ($("#slide'.$i.'").is(":hidden")) {
        $("#slide'.$i.'").show("slow");
    } else {
        $("#slide'.$i.'").slideUp();
    }
});

结论:

我想点击一个 div(例如 id=1)，那个 div 应该打开/关闭。

Answer 1

在你的 div 中使用一个类

$i = 0;
foreach($stock_history as $history){
    echo " 
    <div id='slide" . $i . "' class='slide-class'>
    <p>Date: <strong> " . $history->create_date . "</strong> </p> 
    <p>To: <strong> " . $history->toLocation->name . " </strong> </p> 
    <p>From: <strong> " . $history->fromLocation->name . " </strong> </p>
    <p>Moved by:  <strong> " .  $history->user->username . " </strong> </p>
    <hr />
    </div>";
    $i++;
}

和JS

$(".slide-class").click(function(){
    var current_id = this.id
    if ($("#"+current_id).is(":hidden")) {
        $("#"+current_id).show("slow");
    } else {
    $("#"+current_id).slideUp();
    }
  });