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

Question

У меня есть пользовательская форма, которая использует 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> 

Answer 1

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>