Question

好的，我不确定是否有人问这个问题，我确实是怎么做的，但如果是的话，对不起。

基本上，我在列表中有10个项目。

通过运行此查询：

public function get10items()
{
    $this->query = $this->pdo->prepare("SELECT * FROM items LIMIT 10");
    $this->query->execute();

    while ($row = $this->query->fetch(PDO::FETCH_ASSOC))
    {
        echo '<li id="'.$row['id'].'">'.$row['name'].'</li><br />';
    }
}

这会将数据库中的10个项目列入“＆lt; ul＆gt;”。这也将为每个项目设置一个id，使用它自己的编号，就像在数据库中一样。

现在，使用jquery，我希望jquery找到所点击项目的ID号。

例如我们的列表：

Hello! [id55]
Hai! [id66]

我点击“你好！”项目。如何在使用jquery单击时找出它的ID，然后将其用于将来使用？例如，发送带有该ID的ajax查询等？

<ul class="list">
<?php echo $class->get10items(); ?>
</ul>

基本上我可以使用它：

$(".list").on("click", "li", function() {
    $.post("ajax.php", { get : this.id }, function() {
      blablabla
    });
});

这是对的吗？

Answer 1

这将触发页面上ul的每个li。如果ul有ID，您可以向下钻取更多。

//Using event delegation since not sure when these items are being added
$("ul").on("click", "li", function() {
    console.log(this.id);
});

Answer 2

将类添加到li项中，如下所示：

echo '<li class = "list_item_class" id="'.$row['id'].'>'.$row['name'].'"</li><br />';

然后在jQuery中：

$('.list_item_class').click(function(){
   console.log(this.id);
});

这样可确保只选择课程项目，以免日后选择不明确的选择器。

Answer 3

试试这个：

PHP中的

：

public function get10items()
{
$this->query = $this->pdo->prepare("SELECT * FROM items LIMIT 10");
$this->query->execute();
echo '<ul class='someClassName' id='someUniqueId'>';
while ($row = $this->query->fetch(PDO::FETCH_ASSOC))
{
    echo '<li id="'.$row['id'].'>'.$row['name'].'</li><br />';
}
echo '</ul>';
}

jQuery中的

：

由于您尚未发布您的HTML代码，我将从document委派<。

$(document).on('click'. '.someClassName > li', function() { // see the same class name "someClassName" is used here. 
//If you give some other class name in your PHP file, change here also.
 alert(this.id);//this.id is what you wanted.
});

您还可以使用id的{{1}}：

ul

Answer 4

使用jQuery执行此操作非常简单：

$('ul').on('click', 'li', function(e) {
    var id = e.target.id;
    // do your stuff with the id
});

Answer 5

event.target始终引用触发事件的元素。
因此，event.target.id是您要查找的ID。

Answer 6

您只需要：

var clickedId;
$('li').click(function(){
    clickedId = $(this).attr('id');
});

clickedId将包含被点击元素的ID。

或者您可以使用tymeJV的答案将处理程序委托给UL父级 - 这对于较大的列表会有更好的性能。

查找被点击元素的ID？

6 个答案:

：

：