JQuery работает на JSFiddle, но не на моем сайте.

Question

JQuery работает на JSFiddle, но не на моем сайте.

0

У меня есть эта проблема: я написал сценарий JQuery, который работает на JSFiddle, но он не работает на моем сайте.

Вот код [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 сверху. Может кто-нибудь помочь?

Sir Von Berker 06 май 2014, в 17:03

Источник

7

Не забудьте обернуть ваш код в готовый документ и правильно включить jQuery и ваш скрипт.
adeneo 06 май 2014, в 14:36
1

См. Все эти связанные вопросы справа с тем же названием, что и у вас? Проверь их.
j08691 06 май 2014, в 14:39
0

1. Что вы пытаетесь архивировать? Ваш JSFiddle ничего не делает в моем браузере? 2. Какой стол? Я не вижу стол "наверху"?
dschu 06 май 2014, в 14:40
0

почему вы загружаете 2 библиотеки jQuery?
Chris M 06 май 2014, в 14:50

Показать ещё 2 комментария

Теги:

javascript

jquery

html

css

3 ответа

Ещё вопросы

Не забудьте обернуть ваш код в готовый документ и правильно включить jQuery и ваш скрипт.
См. Все эти связанные вопросы справа с тем же названием, что и у вас? Проверь их.
1. Что вы пытаетесь архивировать? Ваш JSFiddle ничего не делает в моем браузере? 2. Какой стол? Я не вижу стол "наверху"?
почему вы загружаете 2 библиотеки jQuery?

Amit Joki · Answer 1 · 2014-05-06T12-42-00.000Z

Вы должны обернуть свой код в $(document).ready(function(){}) или $(function(){});

JSFiddle автоматически устанавливает параметр onLoad, но вам придется вручную включить его в свой код, чтобы он работал.

Причина, по которой ваш код может не работать, заключается в том, что вы можете пытаться получить доступ к элементам, даже до того, как они существовали.

ElmoVanKielmo · Answer 2 · 2014-05-06T13-31-00.000Z

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() из других ответов будет делать то же самое, но мой более короткий и предпочтительный путь.

Travis J · Answer 3 · 2014-05-06T12-36-00.000Z

Внутри вашего файла http://www.niccow3.site11.com/V2/javate.js вам нужно убедиться, что ваш код находится внутри события готовности к jquery. Вы делаете это в нижней части файла, но другой контент нуждается в нем. Причина, по которой код работает на jsFiddle, а не на вашем сайте, состоит в том, что вы, скорее всего, выбрали обработчик "onload" для раздела кода в левой панели (по умолчанию). Однако исключение этого на вашем сайте означало, что DOM не был готов при выполнении jquery. Когда это произойдет, никакие результаты не возвращаются для селекторов, а 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');

});
});

И то же самое для следующих десятков блоков кода.