Question

我已经在CSS中使用基于无线电输入的jQuery定制了一个星级评级小部件。所有这些都适用于桌面浏览器和Android设备，但它不适用于iPad和iPhone。

您可以在行动here中看到我的小部件。

当我触摸星星时，在iPad（或iPhone）上，它不会被“检查”。

以下是完整代码：A jsFiddle

HTML

<form id="signup_form" class="custom" enctype="multipart/form-data" method="post" name="signup_form" action="">
  <div id="field_2">
    <input id="option_221" type="radio" title="Very Happy" value="Actual_job_rate_5" name="field_2" style="display: none;">
    <span class="custom radio" ></span>
    <input id="option_220" type="radio" title="Happy" value="Actual_job_rate_4" name="field_2" style="display: none;">
    <span class="custom radio" ></span>
    <input id="option_219" type="radio" title="Neutral" value="Actual_job_rate_3" name="field_2" style="display: none;">
    <span class="custom radio" ></span>
    <input id="option_218" type="radio" title="Unhappy" value="Actual_job_rate_2" name="field_2" style="display: none;">
    <span class="custom radio" ></span>
    <input id="option_217" type="radio" title="Very Unhappy" value="Actual_job_rate_1" name="field_2" style="display: none;">
    <span class="custom radio" ></span>
  </div>
</form>

CSS

/* Star rating radio buttons */

form.custom #field_2:not(old) {
  display: inline-block;
  width: 9.5em;
  height: 1.9em;
  overflow: hidden;
  vertical-align: bottom;
  float: left;
}

form.custom #field_2:not(old) > input {
  margin-right: -100%;
  opacity: 0;
}

form.custom #field_2:not(old) > span.custom.radio {
  display: block;
  float: right;
  position: relative;
  background: url('http://www.peoplejob.com/wp-content/themes/sweetdate-child/assets/images/star-off.svg');
  background-size: contain;
  border: 0px;
  top: 0px;
  left: 0px;
  width: 1.9em;
  height: 1.9em;
}

form.custom #field_2:not(old) > span.custom.radio:before {
  content: '';
  display: block;
  width: 1.9em;
  height: 1.9em;
  background: url('http://www.peoplejob.com/wp-content/themes/sweetdate-child/assets/images/star-on.svg');
  background-size: contain;
  opacity: 0;
  transition: opacity 0.2s linear;
  top: 0px;
  left: 0px;
  width: 1.9em;
  height: 1.9em;
}

form.custom #field_2:not(old) > span.custom.radio:hover:before,
form.custom #field_2:not(old) > span.custom.radio:hover ~ span.custom.radio:before,
form.custom #field_2:not(:hover) >:checked ~ span.custom.radio:before {
  opacity: 1;
}

的jQuery

   var toggleRadio = function($element) {
    var $input = $element.prev(),
        $form = $input.closest('form.custom'),
        input = $input[0];

    if (false === $input.is(':disabled')) {
      $form.find('input:radio[name="' + $input.attr('name') + '"]').next().not($element).removeClass('checked');
      if ( !$element.hasClass('checked') ) {
        $element.toggleClass('checked');
      }
      input.checked = $element.hasClass('checked');

      $input.trigger('change');
    }
  };

 $(document).on('click', 'form.custom span.custom.radio', function (event) {
    event.preventDefault();
    event.stopPropagation();

    toggleRadio($(this));
  });

感谢您的帮助！

星级小部件未在iPad和iPhone上更新

0 个答案: