Question

我使用带有<li>元素的列表，我想在检查<li>内的输入时向li添加一个类。

我怎样才能做到这一点？

HTML：

    <dl class="sp-methods" id="checkout-payment-method-load">
    <?php foreach ($methods as $_method):
        $_code = $_method->getCode();
?>
    <li class="formListBlock payment_<?php echo $_code ?>">
    <?php if(!$oneMethod): ?>
     <label for="p_method_<?php echo $_code ?>">
        <input id="p_method_<?php echo $_code ?>" value="<?php echo $_code ?>" type="radio" name="payment[method]" title="<?php echo $this->escapeHtml($_method->getTitle()) ?>" onclick="payment.switchMethod('<?php echo $_code ?>')"<?php if($this->getSelectedMethodCode()==$_code): ?> checked="checked"<?php elseif($_code == $this->__('ops_iDeal')): ?>checked="checked"<?php endif; ?> class="radio" />
        <p class="payment-title"><?php echo $this->escapeHtml($this->getMethodTitle($_method)) ?> <?php echo $this->getMethodLabelAfterHtml($_method) ?></p>
    <?php else: ?>
        <span class="no-display"><input id="p_method_<?php echo $_code ?>" value="<?php echo $_code ?>" type="radio" name="payment[method]" checked="checked" class="radio" /></span>
        <?php $oneMethod = $_code; ?>
    <?php endif; ?>
    <?php if ($html = $this->getPaymentMethodFormHtml($_method)): ?>
    <span class="payment_icon_<?php echo $_code ?>"></span>
    <span class="gratis">TEXT</span>
    <span class="paypal"> TEXT </span>
    </label>
    <div class="formListBlock-selector payment_<?php echo $_code ?>">
        <?php echo $html; ?>
    </div>
    </li>
    <?php endif; ?>
<?php endforeach;
    </dl>

jQuery的：

$('input:radio').change(function(){
    if($(this).is(":checked")) {
        $('li.formListBlock').addClass("menuitemshow");
    } else {
        $('li.formListBlock').removeClass("menuitemshow");
    }
});

Answer 1

您需要使用$("#ul_id [name='name']")选择具有特定名称和.closest("li")的所有输入，以获得最接近的<li>代码。

参见此示例

$("#checkout-payment-method-load [name='payment[method]']").change(function() {
$("#checkout-payment-method-load [name='payment[method]']").each(function(){
  if ($(this).is(":checked")) {
    $(this).closest("li").addClass("menuitemshow");
  } else {
    $(this).closest("li").removeClass("menuitemshow");
  }
});
});

.menuitemshow {
  background: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sp-methods" id="checkout-payment-method-load">
  <li class="formListBlock payment_ops_cc">
    <label for="p_method_ops_cc">
      <input id="p_method_ops_cc" value="ops_cc" type="radio" name="payment[method]" title="Creditcard" onclick="/*payment.switchMethod('ops_cc')*/" class="radio validation-passed" autocomplete="off">
      <p class="payment-title">Creditcard</p>
      <span class="payment_icon_ops_cc"></span>
      <span class="gratis">Text</span>
      <span class="paypal">Text</span>
    </label>
  </li>

  <li class="formListBlock payment_ops_cc">
    <label for="p_method_ops_cc">
      <input id="p_method_ops_cc2" value="ops_cc" type="radio" name="payment[method]" title="Creditcard" onclick="/*payment.switchMethod('ops_cc')*/" class="radio validation-passed" autocomplete="off">
      <p class="payment-title">Creditcard</p>
      <span class="payment_icon_ops_cc"></span>
      <span class="gratis">Text</span>
      <span class="paypal">Text</span>
    </label>
  </li>
</ul>

选中底层输入时，将类添加到上层li

1 个答案: