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>

这是被称为onchange

的JS函数

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-Attribute必须在其范围内是唯一的。（主要是显示的网页）。 Reference

您的HTML：

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

如果你想要一个跨越的ID

，

$i可以是一个计数器（在你的循环中）

你的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_

开头的所有范围

Answer 2

使用此：因为您使用多个元素并给它们相同的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('%');
        }
}

Answer 3

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

此外，如果您的所有<span />都具有相同的id，那么您实际上是在创建一个class（将相似元素分组），因此使用类更有意义。< / p>

e.g。

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

```

通过具有相同id </span>的JS为多个<span>分配符号

3 个答案: