通过id调用的函数，如何在一个页面中运行多次？

Question

用了一个js脚本，是通过id调用的，但是只能调用一次，如何修改能多次调用该脚本，或者有别的方法解决问题

脚本如下

(function () {
    var radioWrap = document.getElementById("radio_wrap"),
        li = radioWrap.getElementsByTagName("li");
    for (var i = 0; i < li.length; i++) {
        li[i].onclick = function () {
            for (var i = 0; i < li.length; i++) {
                li[i].className = "";
            }
            this.className = "checked";
        }
    }
})();

前端代码

  <div id="radio_wrap">
                        <span class="GoodsInformation_reight-dt" style="display:inline-block;font-weight:700;margin-top:5px">机身分类</span>
                        <ul >
                            <li class="c checked">
                                <input type="radio" id="radio_a_01" name="radio_a" />
                                <label for="radio_a_01"><span style="display:inline-block">海风青</span></label>
                                <i></i>
                            </li>
                            <li class="c">
                                <input type="radio" id="radio_a_02" name="radio_a" />
                                <label for="radio_a_02"><span style="display:inline-block">暗夜蓝</span></label>
                                <i></i>
                            </li>
                            <li class="c">
                                <input type="radio" id="radio_a_03" name="radio_a" />
                                <label for="radio_a_03"><span style="display:inline-block">绯玉红</span></label>
                                <i></i>
                            </li>
                        </ul>
                    </div>
                    <script src="../js/checkedborder.js"></script>
                    <div id="radio_wrap">
                        <span class="GoodsInformation_reight-dt" style="display:inline-block;font-weight:700;margin-top:5px">机身分类</span>
                        <ul >
                            <li class="c checked">
                                <input type="radio" id="radio_a_04" name="radio_a" />
                                <label for="radio_a_01"><span style="display:inline-block">海风青</span></label>
                                <i></i>
                            </li>
                            <li class="c">
                                <input type="radio" id="radio_a_05" name="radio_a" />
                                <label for="radio_a_02"><span style="display:inline-block">暗夜蓝</span></label>
                                <i></i>
                            </li>
                            <li class="c">
                                <input type="radio" id="radio_a_06" name="radio_a" />
                                <label for="radio_a_03"><span style="display:inline-block">绯玉红</span></label>
                                <i></i>
                            </li>
                        </ul>
                    </div>
                    <script src="../js/checkedborder.js"></script>

Answer 1

id不能一样，一样需要使用属性选择器，不能用id选择器。你要分2组radio的话name不能一样，一样上下2组只能选择一个，只需要导入一次，在所有html代码最后导入一次就行。对你有帮助能点个采纳吗，谢谢~

<div id="radio_wrap">
    <span class="GoodsInformation_reight-dt" style="display:inline-block;font-weight:700;margin-top:5px">机身分类</span>
    <ul>
        <li class="c checked">
            <input type="radio" id="radio_a_01" name="radio_a" />
            <label for="radio_a_01"><span style="display:inline-block">海风青</span></label>
            <i></i>
        </li>
        <li class="c">
            <input type="radio" id="radio_a_02" name="radio_a" />
            <label for="radio_a_02"><span style="display:inline-block">暗夜蓝</span></label>
            <i></i>
        </li>
        <li class="c">
            <input type="radio" id="radio_a_03" name="radio_a" />
            <label for="radio_a_03"><span style="display:inline-block">绯玉红</span></label>
            <i></i>
        </li>
    </ul>
</div>
<div id="radio_wrap">
    <span class="GoodsInformation_reight-dt" style="display:inline-block;font-weight:700;margin-top:5px">机身分类</span>
    <ul>
        <li class="c checked">
            <input type="radio" id="radio_a_04" name="radio_b" />
            <label for="radio_a_01"><span style="display:inline-block">海风青</span></label>
            <i></i>
        </li>
        <li class="c">
            <input type="radio" id="radio_a_05" name="radio_b" />
            <label for="radio_a_02"><span style="display:inline-block">暗夜蓝</span></label>
            <i></i>
        </li>
        <li class="c">
            <input type="radio" id="radio_a_06" name="radio_b" />
            <label for="radio_a_03"><span style="display:inline-block">绯玉红</span></label>
            <i></i>
        </li>
    </ul>
</div>
<script>
    (function () {
        var radioWrap = document.querySelectorAll("div[id=radio_wrap]");
        for (var Wrap of radioWrap) {
            li = Wrap.getElementsByTagName("li");
            for (var i = 0; i < li.length; i++) {
                li[i].onclick = function () {
                    var li = this.parentNode.parentNode.getElementsByTagName("li");//通过dom关系获取各自的li
                    for (var i = 0; i < li.length; i++) {
                        li[i].className = "";
                    }
                    this.className = "checked";
                }
            }
        }
    })();

</script>