Question

我正在尝试使用jquery单击一个在while循环中的视图按钮来显示div详细信息，但是它只显示第一个不显示其余记录的记录，任何人都可以告诉我解决这个问题.. < / p>

以下是示例代码：

 <html>
<head>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){ 
    $('#view').click(function() {
    var user=$('#user').text();
      alert(user);
    }); 
  });
</script>
<style type="text/css">
#content div{display:inline-block;}
</style>
</head>
<body>
<?php
$i=0;
while($i<5)
{
?>
<div id="content">
<div id="user">Street(<?=$i+1?>)</div>
<div id="view" style="color:green;cursor:pointer;">View</div>
</div>
<?php
$i++;
}
?>
</body>
</html>

Answer 1

id意味着唯一（在Jquery中使用#表示）。请尝试使用class（在Jquery中使用.表示）。

<div class="content">
<div class="user">Street(<?=$i+1?>)</div>
<div class="view" style="color:green;cursor:pointer;">View</div>
</div>

和javascript：

<script type="text/javascript">
    $(function(){ 
        $('.view').click(function() {
            var user=$(this).parent().find('.user').text();
            alert(user);
        }); 
    });
</script>

Answer 2

你已经设置了id =“user”，所以你将得到5个具有相同id的div，所以显然它只会打印第一个。所以使用class。

要获取当前元素的值，请使用

$(this).text();

Answer 3

试试这个适合你的工作..

<html>
<head>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){ 
    $('.view').click(function() {        
        var id = $(this).attr('id');
        var user=$('#user'+id).text();
        alert(user);
    }); 
  });
</script>
<style type="text/css">
#content div{display:inline-block;}
</style>
</head>
<body>
<?php
$i=0;
while($i<5)
{
?>
<div id="content">
<div class="user" id="user<?php echo $i+1;?>">Street(<?php echo $i+1;?>)</div>
<div class="view" id="view<?php echo $i+1;?>" style="color:green;cursor:pointer;">View</div>
</div>
<?php
$i++;
}
?>
</body>
</html>

Jquery脚本未在while循环中运行

3 个答案: