如何获取由 php 脚本动态生成的 div 值？答案

【问题标题】：How to get div values that are dynamically generated by a php script?如何获取由 php 脚本动态生成的 div 值？
【发布时间】：2017-11-13 07:57:14
【问题描述】：

我想提醒我将点击其出价按钮的项目的名称，但我的代码似乎只提醒笔记本电脑。谁能告诉我如何获取通过 php 脚本动态生成的 div 值。下面是页面的代码。我想提醒我点击的那个项目的名称。由于页面是动态生成的，它从包含项目详细信息的数据库中获取项目详细信息。

<?php
	$con = mysqli_connect("localhost","root","*****","bidding") or
	die(mysqli_error($con));
	$select_query = "select * from items";
	$select_query_result = mysqli_query($con, $select_query) or
	die("Query Mistake");
?>
<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Bid</title>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel="stylesheet" href="materialize/css/materialize.css"/>
        <link rel="stylesheet" type="text/css" href="seperate2.css">
        <script src="jquery-3.2.1.min.js"></script>
        <script src="materialize/js/materialize.min.js"></script>
        <script type="text/javascript">
        function post_data(){
        	var item_name = document.getElementById("item_name").innerHTML;
        	alert(item_name);
        }
        </script>
</head>
<body>
	<div class="container">
		<h1>Bid</h1>
		<div class="row">
			<?php while($row = mysqli_fetch_array($select_query_result)) { ?>
			<div class="col s3" >
				<div id="item_name"><?php echo"$row[item_name]"?></div>
				<div id="starting_price"><?php echo"$row[starting_price]"?</div>
				<div><?php echo"$row[description]"?></div>
				<button class="btn waves-effect waves-teal" 
                 onclick="post_data()">Place Bid</button>
			</div>
		    <?php } ?>
		</div>
	</div>
</body>
</html>

【问题讨论】：

我不完全确定你在问什么......但如果你想识别一个被点击的 DIV，你通常会使用 ID。如果 ID 无法更改，则为等效的数据集。还是我误解了您的要求？
是的，我想识别被点击的 DIV，但是 DIV 是动态生成的，每当我点击任何 DIV 时，即使我点击了某些 DIV，它也只显示第一个 DIV 的名称其他 DIV。

标签： javascript php jquery html

【解决方案1】：

HTML 中元素的 ID 必须是唯一的。使用类。在循环中声明 ID 的静态名称，它不是唯一的。

【讨论】：

【解决方案2】：

您的代码需要一个计数器，通过该计数器可以访问动态创建的 DIV。您的 <div class="row"> 块将是：

    <div class="row">
        <?php
        $divCounter = 0; 
        while($row = mysqli_fetch_array($select_query_result)) { 
        $divCounter += 1;
        ?>
        <div class="col s3" >
            <div id="item_name<?php echo $divCounter; ?>"><?php echo"$row[item_name]"?></div>
            <div id="starting_price"><?php echo"$row[starting_price]"?</div>
            <div><?php echo"$row[description]"?></div>
            <button class="btn waves-effect waves-teal" 
             onclick="post_data('<?php echo 'item_name'.$divCounter; ?>')">Place Bid</button>
        </div>
        <?php } ?>
    </div>

请注意，对 Javascript 函数 post_data() 的调用现在提供了包含其计数器的 DIV id。要完成这项工作，请调整 post_data() 以包含参数：

    <script type="text/javascript">
    function post_data(divId){
        var item_name = document.getElementById(divId).innerHTML;
        alert(item_name);
    }
    </script>

如果您愿意，您可以使用$row[item_name] 属性来代替使用计数器并与静态“item_name”连接。能否做到这一点，取决于这个属性是否可以作为一个有效的 HTML id 属性值。

【讨论】：