如何将PHP回显DIV值传递到对话框

Question

每个文章都位于DIV标签中。 想要使每个DIV可单击，并且一旦我单击DIV，对话框应显示适当的DVI值$add->tbl_article_content ， $add->tbl_article_image我的JS对话框仅出现在第一个DIV中。 我应该如何对所有DIV进行处理并传递相关数据。

的PHP

<div class="row">
<?php
    foreach ($data as $value) {
       echo "<div class='col-lg-3'>";
       echo "<p id='target'>" . $value->tbl_article_header . "</p>";
       echo "</div>";       
}
?>

jQuery的

$( "#target" ).click(function() {
        alert( "relevant DIV database values ??? " );
    });

Answer 1

而不是将target作为ID，您应该将其作为class

<div class="row">
<?php
    foreach ($data as $value) {
       echo "<div class='col-lg-3'>";
       echo "<p class='target'>" . $value->tbl_article_header . "</p>";
       echo "</div>";       
   }
?>

 $( ".target" ).click(function() { alert( $(this).html() ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class='col-lg-3'> <p class='target'>Value 1</p> </div> <div class='col-lg-3'> <p class='target'>Value 2</p> </div> <div class='col-lg-3'> <p class='target'>Value 3</p> </div> 

更新

<div class="row">
<?php
    foreach ($data as $value) {
       echo "<div class='col-lg-3'>";
       echo "<p class='target' data-article=".$add->tbl_article_content.">" . $value->tbl_article_header . "</p>";
       echo "</div>";       
   }
?>

 $( ".target" ).click(function() { alert( $(this).attr('data-article') ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class='col-lg-3'> <p class='target' data-article="Articel 1">Head 1</p> </div> <div class='col-lg-3'> <p class='target' data-article="Articel 2">Head 2</p> </div> <div class='col-lg-3'> <p class='target' data-article="Articel 3">Head 3</p> </div> 

Answer 2

id在页面内是唯一的...对一组相关的div使用一个类

<?php
foreach ($data as $value) {
   echo "<div class='col-lg-3'>";
   echo "<p class='target'>" . $value->tbl_article_header . "</p>";
   echo "</div>";       
}
?>

和js

 $( ".target" ).click(function() {
    alert( "relevant DIV database values ??? " );
  });