jQuery 取第 PHP 个结果

Question

我正在尝试 select 来自数据库的数据 jQuery，但我的问题是只有第一个结果绑定了点击处理程序。

这是 PHP 部分：

<?php

$sql = "SELECT * FROM cars WHERE rented = '0'";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        // output data of each row
        while($row = $result->fetch_assoc()) {
            $carName = $row['name'];
            echo '<div id="car" car-name="'.$carName.'">'.$carName.'</div>';
        }
    }else{
        echo 'ολα τα αυτοκινιτακια ειναι νοικιασμενα';
    }

?>

和jQuery部分：

$('#car').on('click', function(){
        var carName = $(this).attr('car-name');
        alert(carName);
    });

假设我正在动态创建两个 div 元素（因为数据库中只有两条记录）。 jQuery 只识别第一个。我怎样才能让它识别所有 div 元素？

Answer 1

代替 id (#car) 使用 class(.car) 作为 div

PHP

echo '<div class="car" car-name="'.$carName.'">'.$carName.'</div>';

JQUERY

$('.car').on('click', function(){
        var carName = $(this).attr('car-name');
        alert(carName);
    });

Answer 2

用于 html data-car-name="car name"

和jquery

while($row = $result->fetch_assoc()) {
            $carName = $row['name'];
            echo '<div class="car" data-car-name="'.$carName.'">'.$carName.'</div>';
        }

$('.car').on('click', function(){
        var carName = $(this).attr('data-car-name');
        alert(carName);
    });

@ManiMuthuPandi 也同意使用类。

Answer 3

您需要访问 class 名称而不是 ID

上的事件

<?php

$sql = "SELECT * FROM cars WHERE rented = '0'";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        // output data of each row
        while($row = $result->fetch_assoc()) {
            $carName = $row['name'];
            echo '<div class="car" car-name="'.$carName.'">'.$carName.'</div>';
        }
    }else{
        echo 'ολα τα αυτοκινιτακια ειναι νοικιασμενα';
    }

?>

JS

$('.car').on('click', function(){
        var carName = $(this).attr('data-car-name');
        alert(carName);
    });

Answer 4

$(document).on('click','#car',function(){ var carName = $(this).attr('car-name'); alert(carName); } );

因为浏览器附加的点击处理程序比您的 php rendering.If 快，所以您将在文档上附加点击处理程序然后它将始终有效。

希望对您有所帮助

谢谢

Answer 5

您正在覆盖#car id。使用 class:

<?php

$sql = "SELECT * FROM cars WHERE rented = '0'";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        // output data of each row
        while($row = $result->fetch_assoc()) {
            $carName = $row['name'];
            echo '<div class="car" car-name="'.$carName.'">'.$carName.'</div>';
        }
    }else{
        echo 'ολα τα αυτοκινιτακια ειναι νοικιασμενα';
    }

?>

JQuery:

$('.car').on('click', function(){
        var carName = $(this).attr('car-name');
        alert(carName);
    });

Answer 6

您应该添加 class 辆车：

<?php

$sql = "SELECT * FROM cars WHERE rented = '0'";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
        $carName = $row['name'];
        echo '<div class="car" car-name="'.$carName.'">'.$carName.'</div>';
    }
}else{
    echo 'ολα τα αυτοκινιτακια ειναι νοικιασμενα';
}

?>

Jquery

$('.car').on('click', function(){
    var carName = $(this).attr('car-name');
    alert(carName);
});

希望对您有所帮助:)

Answer 7

根据属性 id 的 MDN 文档：

The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).¹

因此，在创建 div 元素时，请为它们的 id 属性赋予唯一值。为了将点击处理程序添加到汽车元素的所有元素，请将 class 属性（例如 class="car"）添加到 <div> 元素：

echo '<div id="car_'.$carName.'" car-name="'.$carName.'" class="car">'.$carName.'</div>';

然后在点击处理程序中使用 class selector（即 .car）：

$('.car').on('click', function(){
    var carName = $(this).attr('car-name');
    alert(carName);
});

查看下面的演示（删除了 PHP 代码，因为此沙箱不支持它）：

$('.car').on('click', function(){
        var carName = $(this).attr('car-name');
        alert(carName);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="car_MDX" car-name="MDX" class="car">MDX</div>
<div id="car_m3" car-name="m3" class="car">m3</div>
<div id="car_z3" car-name="z3" class="car">z3</div>

¹_{https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id}

jQuery 取第 PHP 个结果

jQuery taking the first PHP result

javascript

php

mobile

jquery

jquery-on