Squarespace中的Javascript无法正常工作? [英] Javascript in Squarespace isn't working?

问题描述

我有一个自定义表单，该表单使用要添加到我的网站的javascript.表单的作用是代替具有文本标签，而是具有图像标签，当用户将鼠标悬停在图像上或选择图像时，图像标签将更改.我已经在Squarespace外部对其进行了测试，并且似乎工作正常.它不适用于Squarespace.我尝试将HTML/CSS/javascript放在一个代码块中，尝试将CS​​S放在自定义CSS区域中，并且尝试使用代码注入器将javascript放入其中.似乎没有任何效果.HTML/CSS完美显示，只是当您将鼠标悬停或单击图像时没有任何反应.有什么想法吗?

I have a custom form that uses javascript that I'd like to add to my site. What the form does, is in stead of having a text label it has an image label which will change when a user hovers over the image or selects the image. I have tested it outside of Squarespace and it seems to be working fine. It isn't working on Squarespace. I have tried putting the HTML/CSS/javascript together in a code block, I have tried putting the CSS in the custom CSS area, and I have tried using code injector to put the javascript in. Nothing seems to be working. The HTML/CSS show up perfectly, it's just that nothing happens when you hover or click on the image. Any ideas?

这是我的代码:

Javascript:

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>

推荐答案

由于使用的是jquery函数，因此需要包括jquery.在您的JavaScript其余部分之前添加此代码段.最好在 head 部分

You need to include jquery since you are using jquery functions. Add this snippet before the rest of your javascript. Preferably in the head section

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

这篇关于Squarespace中的Javascript无法正常工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！