如何让javascript函数只在div中按类工作？答案

【问题标题】：How to get javascript function work only in div by class?如何让javascript函数只在div中按类工作？
【发布时间】：2015-09-01 05:36:32
【问题描述】：

有一个 HTML / javascript：

<section class="on">
    <select id="comboA" onchange="getComboA(this)">
        <option value="[xfvalue_monthprice1]">100</option>
        <option value="[xfvalue_monthprice2]">200</option>
        <option value="[xfvalue_monthprice3]">300</option>
        <option value="[xfvalue_monthprice5]">400</option>
    </select>

    <div id="prdiv">
        <p id="prid"></p>
    </div>
</section>

<script>
    function getComboA(sel) {
        var value = sel.value;  
        document.getElementById("prid").innerHTML = value;
    }
</script>

Sections 超过 2 个。section 的“on”类是 dinamyc（开/关）。如何强制该功能仅在具有“on”类的部分中工作？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

由于您已使用 jquery 标记了问题，因此您可以使用 jquery 将更改事件仅绑定到具有特定类名的元素。

随着类名动态变化，你也需要使用委托

$(document).on("change", "section.on select", function() {
    $("#prid").html($(this).val());
});

【讨论】：

仅适用于第一部分。我想这是因为主 div（在部分之前，它也有“on”类）。那么，我们怎样才能得到不是 ".on select" 而是 "section.on select" 。提前致谢！
效果很好。但我也必须选择不是 "#prid" ，而是 ".on #prid" 。现在可以了，非常感谢！
如果对您有帮助，请将其标记为 anwer :)

【解决方案2】：

我猜你需要一个 javascript 解决方案。这是我的尝试：

HTML：

<section class="on">
    <select id="comboA">
        <option value="100">100</option>
        <option value="200">200</option>
        <option value="300">300</option>
        <option value="400">400</option>
    </select>
</section>
<section class="off">
    <select id="comboB">
        <option value="100">100</option>
        <option value="200">200</option>
        <option value="300">300</option>
        <option value="400">400</option>
    </select>
</section>
<div id="prdiv"><p id="prid"></p> </div>

JS：

var selCombo = document.querySelector(".on select");
selCombo.addEventListener("change", function() {
    var value = this.value;  
    document.getElementById("prid").innerHTML = value;
});

FIDDLE

【讨论】：

也有效，但仅适用于第一部分。需要 ".on #prid" 。见上，用jquery解决。谢谢！
可以通过'querySelector'来实现，但是它的browser support是有限的。另外，see this 供您选择直系子女时参考。
如果您注意到，我已经将#prdiv 从这两个部分中分离出来并将其保留在最后。并且根据要求，该脚本仅针对 class="on" 的部分运行