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，但您必须手动将其包含在代码中才能使其正常工作。

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

Answer 2

1。您导入jquery两次：

<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>

删除其中一个，因为它们存在冲突。

2. 你应该像这样包装所有的javascript代码：

$(function(){
    // Your js code here
};

这将导致在完全加载页面后执行代码。否则，您尝试对不完整的DOM树进行操作来自其他答案的$(document).ready()解决方案也会做同样的事情，但我的解决方案更短，更受欢迎。

Answer 3

在文件http://www.niccow3.site11.com/V2/javate.js内，您需要确保您的代码在jquery的文档就绪事件中。您可以在文件的底部执行此操作，但其他内容也需要它。代码在jsFiddle而不是在您的站点上工作的原因是您很可能在左侧面板中为代码部分选择了“onload”处理程序（默认情况下）。但是，在您的站点上省略此操作意味着在jquery执行时DOM尚未就绪。当发生这种情况时，选择器没有返回结果，并且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');

});

应该是这个

$(function(){
$("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');

});
});

对于接下来的十几个代码块也一样。

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

3 个答案: