Javascript jQuery未提取正确单击的文本值

我使用php脚本从数据库中提取值，如下所示

<div class="col-md-4" >
    <?php       
        $qry = "SELECT * FROM upperbit_categories";                       
        $rslt = mysqli_query($dbc,$qry);
        while ($output = mysqli_fetch_array($rslt)) {
    ?>
    <li class="nav" id="test" style= "text-decoration: none;">
        <a href="postad" >
            <?php echo $output['Classify'].'<br/>'; } ?>
        </a>
    </li>
</div>

<div class="col-md-4" id="testing">
</div>

此代码给出以下结果：

通用设备

测试设备

可再生能源

工程服务

贸易服务

下面是jQuery位：

<script>
    $(document).ready(function(){
        $("#test").click(function(){
            var classprod = $(this).text();
            $("#testing").text(classprod);
            event.preventDefault();
        })
    });
</script>

$（文档）.ready（函数（）{
$（“#测试”）。单击（函数（）{
var classprod=$（this.text（）；
$（“#测试”）.text（classprod）；
event.preventDefault（）；
})
});

然而，这只输出第1行，而不输出其他内容，即通用设备。

---

为了能够显示单击的任何项目，我必须对javascript代码进行哪些更改？

一般来说，HTML元素的id应该是唯一的，使用jQuery或javascript时可以实现这一要求。在代码中，对循环中的

li

元素使用

id=“test”

，然后使用

$（“#test”）

引用它们，然后，由于id的唯一性，只有第一个

li

起作用

---

您可以使用类而不是id。

小错误，但很容易解决。您的php循环会留下很多打开的标记，一个只关闭一个，然后您应该在Id上使用类来代替多个元素。 另一个提示是，您应该在列表之前打开和关闭ul标记

HTML

<div class="col-md-4" >
    <ul>
        <?php        
        $qry = "SELECT * FROM upperbit_categories";                       
        $rslt = mysqli_query($dbc,$qry);
        while($output = mysqli_fetch_array($rslt)){?>
            <li class="nav test" style= "text-decoration: none;"><a href="postad" ><?php echo $output['Classify'];?></a></li>
        <?php };?>
    </ul>
</div>
<div class="col-md-4" id="testing"></div>

JS

<script>
    $(document).ready(function(){
        $(".test").on('click',function(event){
            event.preventDefault();
            var classprod = $(this).text();
            $("#testing").text(classprod);
        })
    });
</script>

$（文档）.ready（函数（）{
$（“.test”）。在（'click'，函数（事件）{
event.preventDefault（）；
var classprod=$（this.text（）；
$（“#测试”）.text（classprod）；
})
});

---

此外，我不知道你在做什么，但是考虑使用<强> $（“.test A”）< /强>，而不是<强> $（“.test”）>/P>IDS在文档上下文中必须是唯一的，BTW不应该是DIF元素格式的直接子代码。现在，你应该能够自己看到哪里出了问题。