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

Question

我使用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>

然而，这只是输出第1行，但没有其他，即一般设备。为了能够显示单击的任何项目，我必须对我的javascript代码进行哪些更改？

Answer 1

通常，HTML元素的id应该是唯一的，这种要求可以在使用jQuery或JavaScript时实现。在您的代码中，在循环中使用id="test"作为li元素，然后使用$("#test")引用它们，然后，由于id的唯一性，只有第一个li才能工作。

您可以使用类而不是id。

Answer 2

小错误，但容易解决。您的php循环打开了许多标记，一个只关闭了一个，然后您应该对多个元素使用类而不是Id。另一个提示是，您应该在列表之前打开并关闭ul标记。

<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>

另外，我不知道你在做什么，但考虑使用$(".test a")而不是$(".test")