当按钮被点击时，使用JQuery来选择span的值

Use JQuery to select value of span in an li when a button is clicked

本文关键字：JQuery 选择 span 的值 使用 按钮      更新时间：2023-09-26

我有一个foreach循环，它显示从我创建的数据库中获取的待办事项列表。我是这样做的:

<ul class="todo-list">
    <?php foreach($todos as $todo) { ?>
        <li class="todo">
            <button class="delete-todo">&times;</button>
            <input type="checkbox" class="toggle-checked">
            <span id="todo-text"><?php echo $todo; ?></span>
        </li>
    <?php } ?>
</ul>

我有一个X按钮，我希望能够从我的数据库中从特定的li中删除待办事项，但是我在获取span标签中的值时遇到了麻烦。

下面是一些不能正常工作的JQuery示例:

$('.delete-todo').on('click', function(e){
    $.ajax({
        type: "POST",
        url: "deleteTodo.php",
        data: {"deleteTodo": $(".todo-text").next().text()},
        async: false,
        success: function(){
        },
        error: function() {
        }
    });
});

从span标签中获取值的最佳方法是什么?任何帮助都非常感谢!

编辑:

我现在已经切换了它，以便每个待办事项都有一个唯一的id，并且我使用该id从数据库中删除。谢谢你的帮助!

id应该是唯一的，所以用class代替

<ul class="todo-list">
    <?php foreach($todos as $todo) { ?>
        <li class="todo">
            <button class="delete-todo">&times;</button>
            <input type="checkbox" class="toggle-checked">
            <span class="todo-text"><?php echo $todo; ?></span>
        </li>
    <?php } ?>
</ul>

Span标签是按钮的兄弟，所以你可以使用siblings()选择器

来获取它
$(this).siblings('.todo-text').text()


$('.delete-todo').on('click', function(e) {
  alert($(this).siblings('.todo-text').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="todo-list">
  <li class="todo">
    <button class="delete-todo">&times;</button>
    <input type="checkbox" class="toggle-checked">
    <span class="todo-text">dfdfdf</span>
  </li>
</ul>

如果您只是在问如何使用jQuery获取span标签的值，那么这肯定是一个重复的问题，因为堆栈溢出有很多解决方案。以下是其中之一:

如何获取span标签的值

现在，我还会告诉你，你可以做些什么来确保你从正确的span标签中获得值就是给每个span标签一个唯一的id，比如把每个span标签的id改成像这样的

<span id=<?php echo '"todo-text-' . $todo .'"'; ?>>

在我看来，这是一种非常肮脏的方法，但我想这是一个快速的解决方案。上面的代码片段还假设$todo变量是某种唯一标识符。

相关文章：