javascript - JQuery 在 JSFiddle 上工作，但在我的网站上不工作。

Question

我有这个问题: 我编写了一个适用于 JSFiddle 的 JQuery 脚本但它不适用于 my site .

这里是代码[JQUERY]

$("i#ch1").click(function () {
    $('div#change-bg').removeClass();
    //remove classes so it can set for the clicked one "fa fa-circle" and for the other "fa fa-circle-o"
    $('i#ch1').removeClass();
    $('i#ch2').removeClass();
    $('i#ch3').removeClass();
    $('i#ch4').removeClass();

    $('div#change-bg').addClass('bg1');
    //add classes

    $('i#ch1').addClass('fa fa-circle');
    $('i#ch2').addClass('fa fa-circle-o');
    $('i#ch3').addClass('fa fa-circle-o');
    $('i#ch4').addClass('fa fa-circle-o');

});




$("i#ch2").click(function () {
    $('div#change-bg').removeClass();
    $('div#change-bg').addClass('bg2');
    //remove classes
    $('i#ch1').removeClass();
    $('i#ch2').removeClass();
    $('i#ch3').removeClass();
    $('i#ch4').removeClass();
    //add classes
    $('i#ch1').addClass('fa fa-circle-o');
    $('i#ch2').addClass('fa fa-circle');
    $('i#ch3').addClass('fa fa-circle-o');
    $('i#ch4').addClass('fa fa-circle-o');
});




$("i#ch3").click(function () {
    $('div#change-bg').removeClass();
    $('div#change-bg').addClass('bg3');
    //remove classes
    $('i#ch1').removeClass();
    $('i#ch2').removeClass();
    $('i#ch3').removeClass();
    $('i#ch4').removeClass();
    //add classes
    $('i#ch1').addClass('fa fa-circle-o');
    $('i#ch2').addClass('fa fa-circle-o');
    $('i#ch3').addClass('fa fa-circle');
    $('i#ch4').addClass('fa fa-circle-o');
}); 



$("#ch4").click(function () {
    $('div#change-bg').removeClass();
    $('div#change-bg').addClass('bg4');
    //remove classes
    $('i#ch1').removeClass();
    $('i#ch2').removeClass();
    $('i#ch3').removeClass();
    $('i#ch4').removeClass();
    //add classes
    $('i#ch1').addClass('fa fa-circle-o');
    $('i#ch2').addClass('fa fa-circle-o');
    $('i#ch3').addClass('fa fa-circle-o');
    $('i#ch4').addClass('fa fa-circle');
});             


//fa fa-dot-circle-o on mouse over
//fa fa-circle-o on mouse out


$("i#ch1").mouseover(function () {
    $("i#ch1").removeClass();
    $("i#ch1").addClass('fa fa-dot-circle-o');
});
$("i#ch1").mouseout(function () {
    $("i#ch1").removeClass();
    $("i#ch1").addClass('fa fa-circle-o');
});



$("i#ch2").mouseover(function () {
    $("i#ch2").removeClass();
    $("i#ch2").addClass('fa fa-dot-circle-o');
});
$("i#ch2").mouseout(function () {
    $("i#ch2").removeClass();
    $("i#ch2").addClass('fa fa-circle-o');
});


$("i#ch3").mouseover(function () {
    $("i#ch3").removeClass();
    $("i#ch3").addClass('fa fa-dot-circle-o');
});
$("i#ch3").mouseout(function () {
    $("i#ch3").removeClass();
    $("i#ch3").addClass('fa fa-circle-o');
});


$("i#ch4").mouseover(function () {
    $("i#ch4").removeClass();
    $("i#ch4").addClass('fa fa-dot-circle-o');
});
$("i#ch4").mouseout(function () {
    $("i#ch4").removeClass();
    $("i#ch4").addClass('fa fa-circle-o');
});


//by Niccolò Agnoletti

[script_tags_in_html_head]

<!--scripts-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.niccow3.site11.com/V2/javate.js"></script>

[HTML]

<div id="change-bg" class="bg1">
<center>
        <div id="bg-buttons">
            <i class ="fa fa-circle" id="ch1"> </i>
            <i class ="fa fa-circle-o" id="ch2"> </i>
            <i class ="fa fa-circle-o" id="ch3"> </i>
            <i class ="fa fa-circle-o" id="ch4"> </i>
        </div>
            </center>
</div>

[CSS]

.bg1{
    width:640px;
    height:480px;
    background: url('http://lorempixel.com/640/480');
    }
.bg2{
    width:640px;
    height:480px;
    background: url('http://lorempixel.com/640/480/sports/');
    }
.bg3{
     width:640px;
    height:480px;
    background: url('http://lorempixel.com/640/480/sports/This-is-sporty/');
    }
.bg4{
    width:640px;
    height:480px;
    background: url('http://dummyimage.com/640x4:3');
    }


#bg-buttons{display: inline;}
#ch1, #ch2, #ch3,#ch4 {color: orange; background:black;}

---

我还有另一个问题: 应该在底部的表格就在顶部的 div 下方。 有人可以帮忙吗？

Answer 1

您应该将代码包装在 $(document).ready(function(){}) 或 $(function(){});

JSFiddle 会自动设置选项 onLoad，但您必须手动将其包含在代码中才能使其正常工作。

您的代码可能无法正常工作的原因是您可能试图访问元素，甚至在它们存在之前。