我使用的复选框插件无法正常工作

Question

我按了this tutorial创建了动画复选框。 Demo here

我尝试在我的网页上实现最后一个演示示例。它几乎正常工作，但我没有they have的好交叉效果。

我做错了什么？我包含了CSS文件和javascript文件？

我试图直接在html中创建svg框（http://i.stack.imgur.com/k6OQM.png），但它似乎无法解决问题。

Answer 1

1）您应该将form课程更改为

class="ac-custom ac-checkbox ac-cross"

2）也许你应该尝试在之前加载JQuery和Bootstrap：

<title>Bootstrap 101 Template</title>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>  
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Used to move the clouds and others annimations -->
<script src="js/main.js"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- My style sheet -->
<link href="css/main.css" rel="stylesheet">

<!-- CheckBox -->
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/svgcheckbx.js"></script>
<script src="js/modernizr.custom.js"></script>

实际上，问题是你的JavaScript代码没有创建svg元素（图像是工作演示的预览）：

我不确定它会解决整个问题，但我会继续寻找它。 如果我找到了什么，我会编辑这篇文章。

Answer 2

问题出在main.js文件中。目前我没有时间来调试它，但尝试在加载/准备好时加载内容。

PS。将main.js从身体转移到头部。

Answer 3

好的，问题是在我用html创建元素之前加载了javascript插件，所以它无法知道它必须应用于哪里 我为解决这个问题所做的是：

$(document).ready(function() {
    var toto = { "questiontype":"CrossSeveralAnswers"};
    questionSelection(toto)// Create all the html stuff
    include('./js/svgcheckbx.js'); // Apply the script after.
});

感谢大家的帮助

Answer 4

您好，我看到了演示以及他们的页面，他们明确表示这只是一个概念验证而不是解决方案＆＃34;而且他们也表示这可能不适用于某些浏览器。也许这就是你所面临的问题。请阅读这篇文章 the codepros link