每篇文章都位于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 ??? " );
});
答案 0 :(得分: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() );
});
&#13;
<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>
&#13;
<强>更新强>
<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') );
});
&#13;
<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>
&#13;
答案 1 :(得分:0)
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 ??? " );
});