Question

我想在选中单选按钮时向<span class="label product-option">添加“已检查”类，并在选中其他无线电时删除。

如何为此扩展我的代码？

            $htmlValue = $_value->getOptionTypeId();
            if ($arraySign) {
                $checked = (is_array($configValue) && in_array($htmlValue, $configValue)) ? 'checked' : '';
            } else {
                $checked = $configValue == $htmlValue ? 'checked' : '';
            }
            $spanClass = "input-radio";
            if ($checked) {
                $spanClass = "input-radio checked";
            }

            $selectHtml .= '<li>' . '<span class="input-radio"><input type="' . $type . '" class="' . $class . ' ' . $require
                . ' product-custom-option"'
                . ($this->getSkipJsReloadPrice() ? '' : ' onclick="opConfig.reloadPrice()"')
                . ($this->helper('core')->currencyByStore($_value->getPrice(true), $store, false) ? '0' : ' checked="checked"')
                . ' name="options[' . $_option->getId() . ']' . $arraySign . '" id="options_' . $_option->getId()
                . '_' . $count . '" value="' . $htmlValue . '" ' . $checked . ' price="'
                . $this->helper('core')->currencyByStore($_value->getPrice(true), $store, false) . '" /></span>'
                . '<span class="label product-option' . $spanClass . '"><label for="options_' . $_option->getId() . '_' . $count . '"><span class="option-name">'
                . $this->escapeHtml($_value->getTitle()) . '</span>' . $priceStr . '</label></span>';
            if ($_option->getIsRequire()) {
                $selectHtml .= '<script type="text/javascript">' . '$(\'options_' . $_option->getId() . '_'
                . $count . '\').advaiceContainer = \'options-' . $_option->getId() . '-container\';'
                . '$(\'options_' . $_option->getId() . '_' . $count
                . '\').callbackFunction = \'validateOptionsCallback\';' . '</script>';
            }
            $selectHtml .= '</li>';

Answer 1

您的代码显示您已经知道如何判断元素是否被选中，以及如何设置包含类名的变量。

只需扩展该逻辑。

$spanClass = "input-radio";
if ($checked) {
    $spanClass = "input-radio checked";
}

...

'<span class="' . $spanClass . '">'

Answer 2

我没有费心去检查你的php代码，看看html的确如此（下次可能会使用Streams？），但你需要注册一个这样的事件处理程序：

（使用jQuery，因为你似乎已经在使用它了）

$('.input-radio input[type=radio]').change(function() {
  // $('.input-radio.checked').removeClass('checked'); // this works if you only have one .input-radio

  /* if you want multiple (with different names) */
  // note: template string are only available in ES6, if you use earlier versions, use the + to concatinate strings
  $(`.input-radio.checked input[type=radio][name=${this.name}]`)
    .parents('.input-radio.checked').removeClass('checked');

  $(this).parents('.input-radio').addClass('checked');
});

/* This CSS is NOT needed and is only used for effect */

.wrapper span {
  display: block;
  /* To make them vertically aligned, usually makes no sense for span I know */
}

span.input-radio.checked {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <span class="input-radio checked">
    <label>
      Radio Button
      <input type="radio" name="myRadio" checked/>
    </label>
  </span>
  <span class="input-radio">
    <label>
      Radio Button
      <input type="radio" name="myRadio"/>
    </label>
  </span>
  <span class="input-radio">
    <label>
      Radio Button
      <input type="radio" name="myRadio"/>
    </label>
  </span>
  <span class="input-radio">
    <label>
      Radio Button
      <input type="radio" name="myRadio"/>
    </label>
  </span>
  <span class="input-radio">
    <label>
      Radio Button
      <input type="radio" name="myRadio"/>
    </label>
  </span>
  <span class="input-radio">
    <label>
      Radio Button
      <input type="radio" name="myRadio"/>
    </label>
  </span>
</div>

作为旁注，我个人更喜欢将数据属性用于此类而不是类，因为它更清楚地将设计与功能区分开来。

如果选中无线电，则使用类将标签添加到标签

2 个答案: