javascript - 单击按钮时使用 JQuery 选择 li 中的跨度值

Question

我有一个 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 从数据库中删除。感谢您的帮助!

Answer 1

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>