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

assigning symbol to multiple <span> via JS with same id

本文关键字：分配 span 符号 JS ID      更新时间：2023-09-26

我在页面上有一个跨度，它根据数据库表中的记录数通过循环出现，因此有时可能存在单个或多个跨度，确切的数字无法知道，跨度如下所示

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

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

这是下拉菜单

<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应显示%

如 W3C 中所述，ID-Attribute 在其范围内必须是唯一的。（主要是显示的网页）。参考

您的网页：

<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_ 开头的所有范围

使用这个 ： 因为你正在使用多个元素并且给它们相同的 id 不是一个好方法，因为 Id 必须是唯一的。因此，从您的跨度中删除 Id，否则为跨度 ID 提供一个动态名称。

并在您的脚本中使用类。 

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('%');
        }
}

id 属性应该是页面上单个项目的唯一标识符。某些浏览器和库可能允许您选择页面上具有匹配id的所有项目，但这不是该属性的正确用法，因此您无法保证它在所有情况下都能按预期工作。

此外，如果所有<span />都具有相同的id则您正在有效地创建一个class（该组对相似的元素进行分组），因此使用类更有意义。

例如 

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

这会稍微改变处理程序函数，如下所示：

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

''

相关文章：