Question

我对$(this).nextAll("#status").eq(0).text("Deleted")有疑问。我想在标签<span>中添加一个文本：“已删除”，但不插入... 请参阅我的代码：

admin.php PHP：

$sql = "SELECT * FROM `upload_img`";
        $result = mysqli_query($db, $sql);
        while ($row = mysqli_fetch_assoc($result)) {
            echo "<div class='image' data-id='".$row['id']."'><br>";
            echo "<span><strong>Image title</strong>: ".$row['image_title']."</span><br>";
            echo "<span><strong>User of image</strong>: ".$row['user_name']."</span><br>";
            echo "<span><strong>Image file name</strong>: ".$row['image']."</span><br>";
            echo "<span id='status'></span>";
            echo "<button class='delete' data-id='".$row['id']."'>Delete</button><hr>";
            echo "</div>";
        }

admin.js JS：

$(".delete").on("click", function() {
var id = $(this).data("id");
$(this).nextAll("#status").eq(0).text("Deleted"); //This is not work!
$.post("adminServer.php", { id: id }, function(data) {
    data = JSON.parse(data);
    alert(data);
});

}）;

我不知道为什么它不起作用...... 谢谢！

Answer 1

首先，您的问题的一部分是id属性在DOM中必须是唯一的。因此，只会识别第一个。您需要更改生成的HTML以使用status元素上的类：

$sql = "SELECT * FROM `upload_img`";
$result = mysqli_query($db, $sql);
while ($row = mysqli_fetch_assoc($result)) {
  echo '<div class="image" data-id="'.$row['id'].'"><br>';
  echo '<span><strong>Image title</strong>: '.$row['image_title'].'</span><br>';
  echo '<span><strong>User of image</strong>: '.$row['user_name'].'</span><br>';
  echo '<span><strong>Image file name</strong>: '.$row['image'].'</span><br>';
  echo '<span class="status"></span>'; // change the id to class here
  echo '<button class="delete" data-id="'.$row['id'].'">Delete</button><hr>';
  echo '</div>';
}

其次，你的DOM遍历逻辑并不完全正确。 nextAll()经历了连续的兄弟姐妹，但你正在寻找的status是先前的兄弟姐妹。您可以使用prev()或获取closest()父级，然后使用find()。如果你改变HTML元素的顺序，后者会更加健壮。另请注意，eq(0)是多余的，因为每个status容器只生成一个.image。

$(".delete").on("click", function() {
  var id = $(this).data("id");
  $(this).closest('div.image').find('.status').text("Deleted");

  $.post("adminServer.php", { id: id }, function(data) {
    data = JSON.parse(data);
    console.log(data); // don't use alert() for debugging.
  });
});

Answer 2

使用示例数据检查以下代码。希望它有所帮助。

$(this).siblings(".status").eq(0).text("Deleted");

它附近有兄弟姐妹身份状态并更新状态＆＃34;已删除＆＃34;

＆＃13;

$(".delete").on("click", function() {
  var id = $(this).data("id");
  $(this).siblings(".status").eq(0).text("Deleted");
  /*
   $.post("adminServer.php", { id: id }, function(data) {
       data = JSON.parse(data);
       console.log(data); // don't use alert() for debugging.
   });
  */
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='image' data-id='1'>
	<br>
	<span><strong>Image title</strong>: Test1</span><br>
	<span><strong>User of image</strong>: Test1</span><br>
	<span><strong>Image file name</strong>: Test1</span><br>
	<span class='status'></span>
	<button class='delete' data-id='1'>Delete</button><hr>
</div>
<div class='image' data-id='2'>
	<br>
	<span><strong>Image title</strong>: Test2</span><br>
	<span><strong>User of image</strong>: Test2</span><br>
	<span><strong>Image file name</strong>: Test2</span><br>
	<span class='status'></span>
	<button class='delete' data-id='2'>Delete</button><hr>
</div>
<div class='image' data-id='3'>
	<br>
	<span><strong>Image title</strong>: Test3</span><br>
	<span><strong>User of image</strong>: Test3</span><br>
	<span><strong>Image file name</strong>: Test3</span><br>
	<span class='status'></span>
	<button class='delete' data-id='3'>Delete</button><hr>
</div>

＆＃13;

$（this）.nextAll（“＃...”）。eq（0）.text（“***”）不起作用

2 个答案: