使用Jquery控制动态内容

controlling dynamic content with Jquery

本文关键字：动态 控制 Jquery 使用      更新时间：2023-09-26

我试图用动态id控制按钮$num表示按钮的个数但是这段代码不起作用，因为在点击变量$i时，退出循环时会取相同的值:如何解决这个问题?

$(document).ready(function(){
    $num=("#num").attr("value");
    for ($i=0;$i<=$num;$i++){
    $("#createNew"+$i).click(function(){
        $("#j"+$i).hide();
        $("#cNew"+$i).slideToggle(1000);
    });
    $("#join"+i).click(function(){
        $("#cNew"+$i).hide();
        $("#j"+$i).slideToggle(1000);
    });
    }
});
PHP代码: 
while ($row=mysqli_fetch_array($result1)){
      echo "<div class='"well project'">";
      echo"<h1 id='"course'">".$row['courseID']." </h1></br>";
      echo "<p>".$row['description']."</p></br></br>";
      echo "<input type='"button'" class='"btn btn-default bt'" id='"createNew'"value='"create new'" >";
      echo "<input type='"button '" class='"btn btn-default bt'" id='"join'" value='"join'">";
      echo "<div id='"cNew".$i."'" style='"display:none'"></br><form method='"POST'" action='"createNewProject.php?reg=".$row['regID']."'" ><label for='"title'" >Project title</label><input type='"textbox'" class='"form-control'" name='"title'"></br><label for ='" Pdescription'">description</label><textarea name='"Pdescription'" class='"form-control'"></textarea></br> <input type='"submit'" vlaue='"create'" class='"btn btn-default bt'" ></form></div>";
      echo"</br></br><div id='"j".$i."'" style='"display:none'"><form method='"post'"  action='"joinProject.php?reg=".$row['regID']."'"><label for='"pId'">Enter the project ID</label><input type='"textbox'" class='"form-control'" name='"pId'"></br> <input type='"submit'"  value='"Send requst'" class='"btn btn-default bt'"></br></form></div>";
      echo "</div>";
      $i++;
  }
  }
  else 
      echo"<div class='"well project'"><h1>No new projects</h1></div>";
      echo "<input type='"textbox'" id='"num'" value='"".$i."'" style='"display:none'">";

最好使用事件委托。我们也可以使用动态数字作为选择器的一部分。

$('body').on('click', '[id^="createNew"], [id^="join"]', function(){
    var id = $(this).prop('id').split('createNew')[1];
    $('#j'+id).hide();
    $('#cNew'+id).slideToggle(1000);
});
$('body').on('click', '[id^="join"]', function(){
    var id = $(this).prop('id').split('join')[1];
    $('#cNew'+id).hide();
    $('#j'+id).slideToggle(1000);
});

实现的功能是这样的:

相关文章：