尝试实现JSFiddle示例
[英]Attempting to implement JSFiddle example
问题描述
我正在尝试重新创建一个JSFiddle示例，该示例将下拉菜单转换为单选按钮。 这是我指的链接： 链接
创建HTML文件后，我将CSS和Javascript嵌入html文档的标题中。 之后，我去看看它是否有效，但似乎没有。 这是我目前拥有的代码：
<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> /* http://jsfiddle.net/496c9/ */ .radioSelectContainer > select { /*display: none;*/ } .radioSelectContainer > label { display: inline-block; margin: 0.3em 0.3em 0 0; background-color:#EFEFEF; border-radius:4px; border:1px solid #D0D0D0; } .radioSelectContainer > label > span { padding:0.2em; text-align:center; display:block; } .radioSelectContainer > label > input { position:absolute; top:-20px; } .radioSelectContainer > label > input:checked + span { background-color:#404040; color:#F7F7F7; } </style> <script> $(function () { $('.radioSelect').each(function (selectIndex, selectElement) { var select = $(selectElement); var container = $("<div class='radioSelectContainer' />"); select.parent().append(container); container.append(select); select.find('option').each(function (optionIndex, optionElement) { var radioGroup = select.attr('id') + "Group"; var label = $("<label />"); container.append(label); $("<input type='radio' name='" + radioGroup + "' />") .attr("value", $(this).val()) //.click((function () { select.val($(this).val()); })) //radio updates select - see optional below .appendTo(label); $("<span>" + $(this).val() + "</span>").appendTo(label); }); //http://stackoverflow.com/questions/4957207/how-to-check-uncheck-radio-button-on-click //optional - this logic handles unchecking when clicking on an already checked radio container.find(":radio + span").mousedown( function (e) { var $span = $(this); var $radio = $($span.prev()); if ($radio.is(':checked')) { var uncheck = function() { setTimeout(function () { $radio.prop('checked', false); }, 0); }; var unbind = function() { $span.unbind('mouseup', up); }; var up = function() { uncheck(); unbind(); }; $span.bind('mouseup', up); $span.one('mouseout', unbind); } else { select.val($radio.val()); } } ); select.change((function () { //select updates radio $("input[name='" + select.attr('id') + "Group" + "'][value='" + this.value + "']").prop("checked", true); })); }); }); </script> </head> <body> <select class="radioSelect" id="sizeOptions"> <option value="S">S</option> <option value="M">M</option> <option value="L">L</option> <option value="XL">XL</option> <option value="2XL">2XL</option> <option value="3XL">3XL</option> <option value="4XL">4XL</option> <option value="5XL">5XL</option> </select> </body> </html>
1 个解决方案
解决方案1
2 已采纳 2016-12-19 09:13:38
将<script src="https://code.jquery.com/jquery-3.1.0.js"></script>放在任何使用名为$的变量的<script>标记之前。
此代码段将允许您使用$ （在代码示例中用于jQuery）！
jQuery计算在jsfiddle示例中有效，但在主代码中无效
[英]jquery calculation works in jsfiddle example, but not in main code
在jsFiddle中使用模块和控制器的简单AngularJS示例
[英]Simple AngularJS example with a module and controller in jsFiddle
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.