Question

要问这个似乎有点奇怪，因为有几种解决方案，但事实是所有这些解决方案看起来都很漂亮，而且我看起来没有一种方法能够以正确的方式保存表单提交的输入值。

我正在寻找能够替换所有无线电输入的东西，这些输入带有在悬停或点击时获得特殊类的div，以及为每组具有相同名称的无线电输入隐藏的输入类型，隐藏的输入将被更新使用与用户点击的div对应的值。我知道，长句。这就是我想出的：

$('input:radio').each(function(){
    if (this.style.display!='none') {
        var inputName = $(this).attr('name');
        var inputValue = $(this).attr('value');
        var isChecked = $(this).attr('checked');
        if (!$('input:hidden[name='+inputName+']').length)
        // if the hidden input wasn't already created
            $(this).replaceWith('<div class="inputRadioButton" id="'+inputName+'X'+inputValue+'"></div><input type="hidden" name="'+inputName+'" value="'+inputValue+'" />');
        else{
            $(this).replaceWith('<div class="inputRadioButton" id="'+inputName+'X'+inputValue+'"></div>');
            if (isChecked)
                $('input:hidden[name='+inputName+']').attr({'value':inputValue});
        }
        //this bind doesn't work
        $("#"+inputName+"X"+inputValue).click(function(){
            if($('input:hidden[name='+inputName+']').val()!=inputValue){
                $('input:hidden[name='+inputName+']').attr({'value':inputValue});
                $('div[id*='+inputName+'].inputRadioButton').removeClass('inputRadioButtonSelected');
            }
            if (!$("#"+inputName+"X"+inputValue).hasClass('inputRadioButtonSelected'))
                $("#"+inputName+"X"+inputValue).addClass('inputRadioButtonSelected');
        });
    }
});

请告诉我如何解决它。谢谢。

编辑我找到了原因。它应该正常工作，但我的电子商务软件生成的一些无线电输入中有括号（例如id [12]），jQuery正在解析它。修复正在添加

var inputButton = document.getElementById(inputName+"X"+inputValue);

在绑定之前

并将$("#"+inputName+"X"+inputValue)替换为$(inputButton)。

Answer 1

首先，您对问题的推断非常准确。 {id}中的[]个字符不合法，如果您的输入名称包含这些字符，则此代码将会中断。

ID和NAME令牌必须以字母（[A-Za-z]）开头，后面可以跟任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“ _“），冒号（”：“）和句号（”。“）。

但是，这就是事情。您甚至不需要为元素分配任何ID，您可以保留对create <div>的引用并仅引用它。看看这个重构的代码：

$('input:radio').each(function(){
  var $radio = $(this), radioName = $radio.attr('name');
  // check if the radio is shown:
  if ($radio.is(':hidden')) return; 

  // create a div
  var $div = $("<div class='inputRadioButton' />");

  // store the radio name on the div:
  $div.data('radioName', radioName);

  // look for the hidden already being present:
  var $hidden = $('input:hidden').filter(function() { 
    return this.name == radioName; 
  });

  if (!$hidden.length) {
    // didn't find the hidden, lets create one and append it to this div:
    $hidden = $("<input type='hidden' name='"+radioName+"' />").val($radio.val());
    $div.append($hidden); 
  }

  // if the radio is checked, set the hidden value:
  if ($radio.attr('checked')) {
    $hidden.val($radio.val());
    $div.addClass('inputRadioButtonSelected');
  }

  $div.click(function(){
    $hidden.val($radio.val());

    // find any selected radio divs with the same radioName as us
    // and remove the selected class
    $(".inputRadioButtonSelected").filter(function() {
      return ($(this).data('radioName') == radioName);
    }).removeClass('inputRadioButtonSelected');

    // add the class to our div:
    $(this).addClass('inputRadioButtonSelected');
  });

  $radio.replaceWith($div);
});

我整理了jsfiddle demo。

使用jquery替换无线电输入

1 个答案: