容器中元素x的jQuery切换类

Question

对于容器中的某个元素，我遇到了切换类的问题。在不同的位置有多个元素。当前HTML：

<dl class="sp-methods">
    <h4>Recurring</h4>
    <div>
        <dt class="payment-method>
            <label for="p_method_NORM_">
                <input type="radio" id="p_method_NORM_" value="NORM" name="payment[method]" title="">
            Overschrijving
            </label>
        </dt>
        <dd>
            //content not important
        </dd>
    </div>
    <h4>Transfers</h4>
    <div>
        <dt class="payment-method">
            <label for="p_method_FIRL_">
                <input type="radio" id="p_method_FIRL_" value="FIRL" name="payment[method]" title="">
            Overschrijving
            </label>
        </dt>
        <dd>
            //content not important
        </dd>
    </div>
 </dl>

请注意: dt/dd元素也会在主div中重复，因此有一个dt/dd元素的长列表，因此不按div分组：

<dl class="sp-methods">
    <h4>Recurring</h4>
    <div>
        <dt class="payment-method>
            <label for="p_method_NORM_">
                <input type="radio" id="p_method_NORM_" value="NORM" name="payment[method]" title="">
            Overschrijving
            </label>
        </dt>
        <dd>
            //content not important
        </dd>
        <dt class="payment-method>
            <label for="p_method_NORM_">
                <input type="radio" id="p_method_NORM_" value="NORM" name="payment[method]" title="">
            Overschrijving
            </label>
        </dt>
        <dd>
            //content not important
        </dd>
        <dt class="payment-method>
            <label for="p_method_NORM_">
                <input type="radio" id="p_method_NORM_" value="NORM" name="payment[method]" title="">
            Overschrijving
            </label>
        </dt>
        <dd>
            //content not important
        </dd>
        <dt class="payment-method>
            <label for="p_method_NORM_">
                <input type="radio" id="p_method_NORM_" value="NORM" name="payment[method]" title="">
            Overschrijving
            </label>
        </dt>
        <dd>
            //content not important
        </dd>
    </div>
 </dl>

我在无线电按钮的变化上切换了一个类，这样标签就会在视觉上发生变化。我遇到的问题是，我似乎无法在仍然与$j(this)相关的情况下切换正确的元素，因为dt元素有时位于它自己的div中，有时它与其他div位于主div中，因此我不能使用.siblings。至少我觉得。

请帮助，谢谢:)

$j('.sp-methods label input[type=radio]').change(function() {
    $j('.sp-methods .payment-method').removeClass("checked");
    $j(this).parent().parent().addClass("checked").siblings().removeClass("checked");
});

Answer 1

下面的javascript足以涵盖这两种情况，我使用jquery closest来访问dt，而不是使用2个parent函数调用：

$('.sp-methods label input[type=radio]').change(function() {
        // first reach the closes dl and find all the dt and remove the class checked
        $(this).closest('.sp-methods').find('.payment-method').removeClass("checked");
        // then find the closest dt and add the class checked
        $(this).closest('dt').addClass("checked");
    });

在标记中有一个问题，您忽略了一些dt元素的class属性的引号：

<dt class="payment-method>应为<dt class="payment-method">

代码片段：

​

$('.sp-methods label input[type=radio]').change(function() {
        $(this).closest('.sp-methods').find('.payment-method').removeClass("checked");
        $(this).closest('dt').addClass("checked");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="sp-methods">
    <h4>Recurring</h4>
    <div>
        <dt class="payment-method">
            <label for="p_method_NORM_">
                <input type="radio" id="p_method_NORM_" value="NORM" name="payment[method]" title="">
            Overschrijving
            </label>
        </dt>
        <dd>
            //content not important
        </dd>
    </div>
    <h4>Transfers</h4>
    <div>
        <dt class="payment-method">
            <label for="p_method_FIRL_">
                <input type="radio" id="p_method_FIRL_" value="FIRL" name="payment[method]" title="">
            Overschrijving
            </label>
        </dt>
        <dd>
            //content not important
        </dd>
    </div>
 </dl>

​