Javascript в Squarespace не работает?

У меня есть пользовательская форма, использующая javascript, которую я хотел бы добавить на свой сайт. Что делает форма, так это то, что вместо текстовой метки у нее есть метка изображения, которая будет меняться, когда пользователь наводит курсор на изображение или выбирает изображение. Я протестировал его за пределами Squarespace, и, похоже, он работает нормально. Это не работает на Squarespace. Я попытался объединить HTML/CSS/javascript в блок кода, я попытался поместить CSS в настраиваемую область CSS и попытался использовать инжектор кода для ввода javascript. Кажется, ничего не работает. HTML/CSS отображаются отлично, просто ничего не происходит, когда вы наводите курсор или нажимаете на изображение. Любые идеи?

Вот мой код:

Javascript:

$('#spiritWhiskeyCandle img').hover(
     function () {
         if($(this).next().val() !== "1") {
             $(this).attr('src', 'http://i1380.photobucket.com/albums/ah191/thedetroitbox/SpiritWhiskeyh_zpsf291cbeb.png');
         }
      },
     function () {
         if($(this).next().val() !== "1") {
             $(this).attr('src', 'http://i1380.photobucket.com/albums/ah191/thedetroitbox/SpiritWhiskey_zps968a5a84.png');
         }
     }
  );


$("#spiritWhiskeyCandle img").click(function() {
    if($(this).next().val() !== "1") {
         $(this).attr("src", "http://i1380.photobucket.com/albums/ah191/thedetroitbox/SpiritWhiskeyc_zps62af06c4.png");
         $(this).next().val("1");
    } else {
         $(this).attr("src", "http://i1380.photobucket.com/albums/ah191/thedetroitbox/SpiritWhiskey_zps968a5a84.png");
         $(this).next().val("0");
    }
});

CSS:

#spiritWhiskeyCandle {
width:24%;
height:0;
padding-bottom:24%;
position:relative;
float:left;
margin-right:1%;
margin-bottom:1%;
}

#spiritWhiskeyCandle img {
position:absolute;
width:100%;
height:100%;
cursor:pointer;
}

HTML:

<form>
    <label for="T3I1" id="spiritWhiskeyCandle">
        <img src="http://i1380.photobucket.com/albums/ah191/thedetroitbox/SpiritWhiskey_zps968a5a84.png">
        <input name="T3I1" type="radio" id="T3I1" style="display:none">
    </label>
</form>

person rachel    schedule 23.11.2014    source источник
comment
У вас есть jquery на вашем сайте Squarespace? У вас есть код javascript внутри функции $(document).ready? вы получаете какие-либо ошибки в вашей консоли javascript?   -  person Jonathan Crowe    schedule 24.11.2014
comment
У меня нет jquery на моем сайте. У меня не было функции $(document).ready, хотя я только что добавил ее и до сих пор ничего не вижу. Я не получаю никаких ошибок.   -  person rachel    schedule 24.11.2014
comment
на вашем сайте нет jquery или это опечатка? Кроме того, это где-то в прямом эфире? Это помогло бы решить проблему, если бы мы могли увидеть ее воспроизведение. Кроме того, изображения добавляются динамически?   -  person Jonathan Crowe    schedule 24.11.2014
comment
Нет, не опечатка. У меня нет jquery — я не совсем уверен, что он мне нужен? Вы можете просмотреть страницу здесь: www.thedetroitbox.com/test-page   -  person rachel    schedule 24.11.2014
comment
Можете ли вы обновить сайт, чтобы не использовать приведенный ниже ответ? Это не сработает и сломает остальную часть javascript на вашей странице.   -  person Jonathan Crowe    schedule 24.11.2014
comment
Да, прости. Просто переключил обратно на то, что было раньше.   -  person rachel    schedule 24.11.2014


Ответы (1)


Вам нужно включить jquery, так как вы используете функции jquery. Добавьте этот фрагмент перед остальной частью вашего javascript. Желательно в разделе head

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
person Jonathan Crowe    schedule 23.11.2014
comment
Спасибо! Это вместе с функцией $(document).ready исправило это. - person rachel; 24.11.2014
comment
Очень рад помочь! Удачи! - person Jonathan Crowe; 24.11.2014