Question

这是我的Html

<div class="box box-payment-method">
    <strong class="box-title">
            <span>payment Method</span>
        </strong>
    <div class="box-content">
        <dl class="items methods-payment">
            <dd class="item-content">
                <fieldset class="fieldset">
                    <legend class="legend">
                        <span>Standard Delivery</span>
                    </legend><br>
                    <div class="field choice">
                        <div class="control">
                            <input name="payment_method[1894]" value="standard_standard" id="s_method_1894_standard_standard" class="radio" type="radio">
                        </div>
                        <label for="s_method_1894_standard_standard">Standard Payment</label><span class="method-title" style="display: block;">No Payment charges</span>
                    </div>
                </fieldset>
            </dd>
            <dd class="item-content">
                <fieldset class="fieldset">
                    <legend class="legend">
                        <span>Express Delivery</span>
                    </legend><br>
                    <div class="field choice">
                        <div class="control">
                            <input name="payment_method[1894]" value="express_express" id="s_method_1894_express_express" class="radio" type="radio">
                        </div>
                        <label for="s_method_1894_express_express">One click Payment</label>
                        <span class="method-title" style="display: block;">direct checkout</span>
                        <span class="method-title" style="display: block;">payment Charges                                                                                                                                                                                                                                                <span class="price">₹49.00</span> </span>
                    </div>
                </fieldset>
            </dd>
        </dl>
    </div>
</div>

如上所述，有多个DD（在其他div和动态id上必须为它们工作，所以我不能使用id作为标识符）

这是我的JQuery

jQuery('.box-shipping-method input:radio').click(function () {
    if (jQuery(this).parent().closest('div').next().text() == 'One click Payment')
    {
        alert(jQuery(this).parent().closest('div').attr( "class" ))

    }
    if (jQuery(this).parent().closest('div').next().text() == 'Standard Payment')
    {
        if (jQuery(this).parent().closest('div').nextAll().eq(1).length == 0) {
            jQuery(this).parent().closest('div').next().after('<span class="method-title" style="display: block;">No Payment charges</span>')
        }
    }
});

现在，我想在点击一次点击付款后删除标准付款的方法标题，反之亦然，如何获取下一个或上一个方法标题＆＃39;甚至是下一个或预览单选按钮

Js Fiddle

Answer 1

您的选择器对于绑定事件处理程序不正确它应该是.box-payment-method :radio并且还使用change事件而不是click.

您可以使用.closest()到dd元素遍历，然后使用.prev() / .next()定位其上一个/下一个兄弟。

//Correct selector
jQuery('.box-payment-method :radio').change(function() {
    //Cache in a variable
    var target = jQuery(this).closest('div');
    if (target.next().text() == 'One click Payment') {
        //Traverse up using closest() then use .prev()
        $(this).closest('dd').prev().find('.method-title').remove();
    }

    if (target.next().text() == 'Standard Payment' && target.nextAll().eq(1).length == 0) {
        target.next().after('<span class="method-title" style="display: block;">No Payment charges</span>')
    }
});

＆＃13;

jQuery('.box-payment-method :radio').change(function() {
  var target = jQuery(this).closest('div');
  if (target.next().text() == 'One click Payment') {
    $(this).closest('dd').prev().find('.method-title').remove();
  }

  if (target.next().text() == 'Standard Payment' && target.nextAll().eq(1).length == 0) {

    target.next().after('<span class="method-title" style="display: block;">No Payment charges</span>')

  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box box-payment-method">
  <strong class="box-title">
            <span>payment Method</span>
        </strong>
  <div class="box-content">
    <dl class="items methods-payment">
      <dd class="item-content">
        <fieldset class="fieldset">
          <legend class="legend">
            <span>Standard Delivery</span>
          </legend>
          <br>
          <div class="field choice">
            <div class="control">
              <input name="payment_method[1894]" value="standard_standard" id="s_method_1894_standard_standard" class="radio" type="radio">
            </div>
            <label for="s_method_1894_standard_standard">Standard Payment</label>
          </div>
        </fieldset>
      </dd>
      <dd class="item-content">
        <fieldset class="fieldset">
          <legend class="legend">
            <span>Express Delivery</span>
          </legend>
          <br>
          <div class="field choice">
            <div class="control">
              <input name="payment_method[1894]" value="express_express" id="s_method_1894_express_express" class="radio" type="radio">
            </div>
            <label for="s_method_1894_express_express">One click Payment</label>
            <span class="method-title" style="display: block;">direct checkout</span>
            <span class="method-title" style="display: block;">payment Charges                                                                                                                                                                                                                                                <span class="price">₹49.00</span> </span>
          </div>
        </fieldset>
      </dd>
    </dl>
  </div>
</div>

＆＃13;

如何获取前一个<dd>的对象

1 个答案: