向页面添加第二个脚本时出现 Javascript 问题

Question

两个 JS 脚本都有效。我的问题是，当我添加第二个 JS 脚本时，第一个 JS 不起作用。我该如何解决这个问题？

第一个 JS 脚本

<script>
$(document).ready(function(){
    $("button1").click(function(){
        $("div1").toggleClass("grid");
    });
});
</script>

第二个 JS 脚本

 <script>
var $j = jQuery.noConflict();
$j(document).ready(function () {
    $j("#trigger").change(function () {
        if ($j(this).data('options') == undefined) {
            $j(this).data('options', $j('select.switchable option').clone());
        }
        var id = $j(this).val();
        var that = this;
        $j("select.switchable").each(function () {
            var thisname = $j(this).attr('name');
            var theseoptions = $j(that).data('options').filter('.' + thisname + '_' + id);
            $j(this).html(theseoptions);
        });
    });
    //then fire it off once to display the correct elements
    $j('#trigger').trigger('change');
});

</script>

Answer 1

您应该以同样的方式尊重所有文档就绪功能:删除 j 并仅使用 $

第一个 JS 脚本

<script>
$(document).ready(function(){
    $("button1").click(function(){
        $("div1").toggleClass("grid");
    });
});
</script>

第二个 JS 脚本

 <script>
$(document).ready(function () {
    $("#trigger").change(function () {
        if ($(this).data('options') == undefined) {
            $(this).data('options', $('select.switchable option').clone());
        }
        var id = $(this).val();
        var that = this;
        $("select.switchable").each(function () {
            var thisname = $(this).attr('name');
            var theseoptions = $(that).data('options').filter('.' + thisname + '_' + id);
            $(this).html(theseoptions);
        });
    });
    //then fire it off once to display the correct elements
    $('#trigger').trigger('change');
});

</script>