Squarespace 中的 JavaScript 不起作用？

Question

我有一个使用 javascript 的自定义表单，我想将其添加到我的网站中。该表单的作用不是使用文本标签，而是使用图像标签，当用户将鼠标悬停在图像上或选择图像时，图像标签会发生变化。我已经在 Squarespace 之外测试过它，它似乎工作正常。它不适用于 Squarespace。我尝试过将 HTML/CSS/javascript 放在一个代码块中，我尝试过将 CSS 放在自定义 CSS 区域中，并且尝试过使用代码注入(inject)器将 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>