我有一个foreach循环,它显示从我创建的数据库中获取的待办事项列表。我是这样做的:
<ul class="todo-list">
<?php foreach($todos as $todo) { ?>
<li class="todo">
<button class="delete-todo">×</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">×</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">×</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变量是某种唯一标识符。