Question

我找不到确切的词语让你理解。我最好向你展示我的代码：

<?php while($row=mysqli_fetch_array($res)){ ?>

<button class="btn<?php echo $row['id']; ?>">Button</button>
<p hidden class="area<?php echo $row['id']; ?>">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni beatae vero perspiciatis atque praesentium animi, non? Voluptatem, tempora fugiat quos animi facilis facere obcaecati enim reiciendis excepturi sunt! Ducimus, modi!
</p>

<?php } ?>


<script>
    $('.btn').click(function(){   // Can't set the specific number beside .btn
        $('.area').show(); // Can't set the specific number beside .area
    });
</script>

我想为特定课程完成我的工作。不知道如何从和

标签中获取确切的类名。

我期待：

<script>
    $('.btn1').click(function(){
        $('.area1').show();
    });

    $('.btn2').click(function(){
        $('.area2').show();
    });

    $('.btn3').click(function(){
        $('.area3').show();
    });

    --------------- and so on -------------
</script>

希望你明白这一点。

Answer 1

如果你有确切的HTML，请指定一个公共类，即btn和area，然后使用DOM关系来定位所需的元素。

<button class="btn">Button</button>
<p class="area">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni beatae vero perspiciatis atque praesentium animi, non? Voluptatem, tempora fugiat quos animi facilis facere obcaecati enim reiciendis excepturi sunt! Ducimus, modi!
</p>

脚本

$('.btn').click(function(){
    $(this).next('.area').toggle();
});

但是，如果您没有确切的HTML，您仍然可以使用公共类来使用自定义data-*属性绑定事件处理程序。

<button class="btn" data-target=".area<?php echo $row['id']; ?>">Button</button>
<p class="area<?php echo $row['id']; ?>">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni beatae vero perspiciatis atque praesentium animi, non? Voluptatem, tempora fugiat quos animi facilis facere obcaecati enim reiciendis excepturi sunt! Ducimus, modi!
</p>

然后使用

$('.btn').click(function(){
    $($(this).data('target')).toggle();
});

如何在循环内切换特定的div类

1 个答案: