javascript - 通过具有相同 ID 的 JS 将符号分配给多个 <span>

Question

我在页面上有一个跨度，它根据数据库表中的记录数通过循环出现，所以有时可能有一个跨度或多个跨度，无法知道确切的数字，跨度看起来像这样

<span class="add-on" id="goaltypeicon"></span>

然后我有一个下拉菜单，根据选择，我需要跨度来显示 $ 符号或 % 符号

这是dropdpwn菜单

<select onchange="selectSavingOption(this)" class="input-xxlarge" id="saving_options"
        name="saving_options" style="width: 100%"> 

    <option value="weekly_savings_amount"> Set Weekly Savings Amount</option>
    <option value="weekly_savings_percent">Allocate % Of Weekly Savings</option>

</select>

这是被调用的 JS 函数 onchange

function selectSavingOption(element) {
        if (element.options[element.selectedIndex].value == 'weekly_savings_amount') {
            alert('amount');
            $("#goaltypeicon").html('$');
        }if (element.options[element.selectedIndex].value == 'weekly_savings_percent') {
            alert('percent');
            $("#goaltypeicon").html('%');
        }
}

上述解决方案有效，但出于某种原因，它仅适用于 1 个跨度。我猜它找到的第一个跨度，但它不适用于其余跨度。

例如，如果屏幕上有 4 个跨度，则 $ 和 % 的显示将仅适用于第一个跨度。

如果我能在这方面得到一些帮助，我将不胜感激。我需要根据选择将跨度符号从 $ 更改为 % 的解决方案。

值 weekly_savings_amount 应该显示 $ 值 weekly_savings_percent 应该显示 %

Answer 1

根据 W3C 的规定，ID 属性在其范围内必须是唯一的。 (主要是显示的网页)。 Reference

您的 HTML:

<span class="add-on" id="goaltypeicon_<?= $i ?>"></span>

$i 如果您想在您的跨度内使用一个 ID，则可以是一个计数器(在您的循环中)

你的JS:

function selectSavingOption(element) {
    if (element.options[element.selectedIndex].value == 'weekly_savings_amount') {
        alert('amount');
        $(".add-on").html('$');
    }if (element.options[element.selectedIndex].value == 'weekly_savings_percent') {
        alert('percent');
        $(".add-on").html('%');
    }
}

如果您的跨度内容不应在所有跨度中更新，您必须使您的类多样化或选择其他选择器，如 :first、:nth-child

通过将计数器附加到您的 ID 的方法，您还可以在 jQuery 中选择通配符选择器:

$("span[id^=goaltypeicon_]") 

这会选择 ID 以 goaltypeicon_ 开头的所有范围