尝试实现 JSFiddle 示例答案

【问题标题】：Attempting to implement JSFiddle example尝试实现 JSFiddle 示例
【发布时间】：2016-12-19 17:46:24
【问题描述】：

我正在尝试重新创建一个将下拉菜单转换为单选按钮的 JSFiddle 示例。这是我所指的链接： link

创建 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>

【问题讨论】：

将 jquery 库添加到您的头脑中

标签： javascript jquery html css

【解决方案1】：

将<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 放在任何使用名为$ 的变量的<script> 标记之前。

此代码 sn-p 将允许您使用 $（在您的代码示例中用于 jQuery）！

【讨论】：

感谢大家的帮助！
请注意，$ 不一定是 jQuery 的同义词！ jQuery 使用它作为自己的快捷方式，这是真的，但其他像 Prototype 和 Mootools 也这样做。（见this answer。）