简体   繁体   中英

Adding code into weebly

I have this http://jsfiddle.net/TtX7F/1/ but I don't know how to get it to work in weebly. The HTML part works, but the js only works when editing, not when it's published and I don't know where to put in the CSS.

This is the javascript

$("input").on("click", color);
$(document).ready(color);

function color() {
var shell = $("[name='shell']:checked").val(),
    thumbs = $("[name='thumbs']:checked").val(),
    result = {
        "shell": "",
            "thumbs": ""
    };

switch (true) {
    case (shell === "black"):
        result.shell = "http://liberatedinamerica.com/wp-content/uploads/2013/05/shell-black.png";
        break;
    case (shell === "blue"):
        result.shell = "http://liberatedinamerica.com/wp-content/uploads/2013/05/shell-blue.png";
        break;
    case (shell === "pink"):
        result.shell = "http://liberatedinamerica.com/wp-content/uploads/2013/05/shell-pink.png";
        break;
}

switch (true) {
    case (thumbs === "red"):
        result.thumbs = "http://liberatedinamerica.com/wp-content/uploads/2013/05/ey-thumbs-ps3-red.png";
        break;
    case (thumbs === "lime"):
        result.thumbs = "http://liberatedinamerica.com/wp-content/uploads/2013/05/ey-thumbs-ps3-lime.png";
        break;
}

$(".shell").attr("src", result.shell);
$(".thumbs").attr("src", result.thumbs);

console.log(result);

}

You can add the HTML in the 'Embed' Element and the CSS in your main style.css. Javascript can also be added using the Embed Element. Do add Javascript, you can try this:

<script> <Insert your Javascript Code here> </script>

To avoid using to many elements, simply add the Javascript code below the HTML code, like this:

<html>
<add your HTML code here>
</html>
<script>
<Javascript code>
</script>

The HTML code can be placed via "embed code" element. The CSS can be inserted to your site/page/lay out header but remember to enclose it with <style></style> . But you can also add the CSS on the main-style.css. The JS or JavaScript (and other JQueries) can be placed on header/ footer code box enclosed with <script></script> .

That's the simplest explanation. More detailed explanation on: http://www.myweeblytricks.com/2014/01/3-ways-in-editing-weeblys.html

You can add your js code to the custom.js file in weebly files. enter image description here

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM