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>

Squarespace中的Javascript无法正常工作？

1 个答案: