嘗試實現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.