如何在 php 'foreach' 循环中添加唯一的 div ID 并在 JavaScript 中使用它来显示隐藏元素

Question

我有一个简单的 php 'foreach' 循环，当只有一个循环时它工作正常。 php 代码显示一个简单的 select 框，它根据选择值显示或隐藏一个 div。 然后在每个循环中重复 select 框和 div。 问题是，当循环中有多个重复代码时，显示/隐藏 JavaScript 不起作用，因为 ID 不是唯一的，只有循环中的第一个起作用。

我怎样才能让它在一个循环中工作？ ID 是否需要是唯一的，或者是否有更好的方法来使用 Javascript？

PHP 代码：

foreach ( $order->get_items() as $item_id => $item ) {
             
                echo 'Service Area:';
                echo '<select id="serviceareaselect">';
                echo '<option value="servicearea">Select an Area...</option>';
                echo '<option value="area1">Area 1</option>';
                echo '<option value="area2">Area 2</option>';
                echo '</select>';
             
                // Service Area 1
                echo '<div id="area1" class="servicearea" style="display:none">';
                echo '<input type="checkbox" id="dur1" name="dur1" value="Dur1"><label for="vehicle1">Dur1</label><br>';
                echo '<input type="checkbox" id="dur2" name="dur2" value="Dur2"><label for="vehicle1">Dur2</label><br>';
                echo '</div>';
                
                // Service Area 2
                echo '<div id="area2" class="servicearea" style="display:none">';
                echo '<input type="checkbox" id="aln1" name="aln1" value="Aln1"><label for="vehicle1">Aln1</label><br>';
                echo '<input type="checkbox" id="aln2" name="aln2" value="Aln2"><label for="vehicle1">Aln2</label><br>';
                echo '</div>';
                
}

JAVASCRIPT 代码：

$(function()
{
$("#serviceareaselect").change(function(){
    $(".servicearea").hide();
    $("#" + $(this).val()).show();
    });
});

Answer 1

完全不使用 ID 属性，通过检查event ，尤其是event.target ，很容易识别要处理的项目

如果您将delegated event listener器分配给某个祖先元素（在这种情况下，我使用了文档本身），由于事件冒泡，您可以识别哪个特定的 DOM 节点触发了change事件，并使用其他选择器机制（querySelector、querySelectorAll , parentNode 等）适当地操作其他 DOM 元素是微不足道的。

下面的示例稍作修改，因为您在 PHP 中渲染的 HTML 部分现在具有公共父元素，以使识别任务更容易。

无论要呈现多少这样的元素section项，事件处理程序机制都应该以相同的方式工作，而无需向 ID 属性添加整数，老实说，这会变得混乱。

The Javascript is vanilla Javascript as I don't use jQuery and would likely mislead with my attempts at using it but no doubt there are appropriate jQuery methods available to do this.

 document.addEventListener('change', e => { if (e.target.name == 'serviceareaselect') { let parent = e.target.parentNode; parent.querySelectorAll('.servicearea').forEach(n => n.style.display = 'none'); if (e.target.options.selectedIndex > 0) parent.querySelector(`[data-id="${e.target.value}"]`).style.display = 'block'; } })

 label{display:block}

 <section> Service Area: <select name="serviceareaselect"> <option value="servicearea">Select an Area... <option value="area1">Area 1 <option value="area2">Area 2 </select> // Service Area 1 <div data-id="area1" class="servicearea" style="display:none"> <label><input type="checkbox" name="dur1" value="Dur1">Dur1</label> <label><input type="checkbox" name="dur2" value="Dur2">Dur2</label> </div> // Service Area 2 <div data-id="area2" class="servicearea" style="display:none"> <label><input type="checkbox" name="aln1" value="Aln1">Aln1</label> <label><input type="checkbox" name="aln2" value="Aln2">Aln2</label> </div> </section> <section> Service Area: <select name="serviceareaselect"> <option value="servicearea">Select an Area... <option value="area1">Area 1 <option value="area2">Area 2 </select> // Service Area 1 <div data-id="area1" class="servicearea" style="display:none"> <label><input type="checkbox" name="dur1" value="Dur1">Dur1</label> <label><input type="checkbox" name="dur2" value="Dur2">Dur2</label> </div> // Service Area 2 <div data-id="area2" class="servicearea" style="display:none"> <label><input type="checkbox" name="aln1" value="Aln1">Aln1</label> <label><input type="checkbox" name="aln2" value="Aln2">Aln2</label> </div> </section>

Answer 2

Id 必须是唯一的。 您可以在循环中使用$item_id使其独一无二。

PHP 代码：

foreach ( $order->get_items() as $item_id => $item ) {
 
    echo 'Service Area:';
    echo '<select id="serviceareaselect_'.$item_id.'" class="serviceareaselect" data-itemid="'.$item_id.'">';
    echo '<option value="servicearea">Select an Area...</option>';
    echo '<option value="area1_'.$item_id.'">Area 1</option>';
    echo '<option value="area2_'.$item_id.'">Area 2</option>';
    echo '</select>';
 
    // Service Area 1
    echo '<div id="area1_'.$item_id.'" class="servicearea_'.$item_id.'" style="display:none">';
    echo '<input type="checkbox" id="dur1" name="dur1" value="Dur1"><label for="vehicle1">Dur1</label><br>';
    echo '<input type="checkbox" id="dur2" name="dur2" value="Dur2"><label for="vehicle1">Dur2</label><br>';
    echo '</div>';
    
    // Service Area 2
    echo '<div id="area2_'.$item_id.'" class="servicearea_'.$item_id.'" style="display:none">';
    echo '<input type="checkbox" id="aln1" name="aln1" value="Aln1"><label for="vehicle1">Aln1</label><br>';
    echo '<input type="checkbox" id="aln2" name="aln2" value="Aln2"><label for="vehicle1">Aln2</label><br>';
    echo '</div>';
    
}

JS代码：

$(function(){
    $(".serviceareaselect").change(function(){
        let item_id = $(this).data("itemid");
        $(".servicearea_" + item_id).hide();
        $("#" + $(this).val()).show();
    });
});