jQuery 为容器中的元素 x 切换 class

Question

我在为容器内的某个元素切换 class 时遇到问题。不同位置有多个元素。当前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 元素，因此不按 [= 分组29=]:

<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>

我在单选按钮的变化上切换了 class，因此标签在视觉上发生了变化。我遇到的问题是，我似乎无法切换正确的元素，同时仍然与 $j(this) 相关，因为 dt 元素有时位于它自己的 div 中，有时它位于主 [=] 中29=] 与所有其他 dt，因此我不能使用 .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足以涵盖这两种情况，我使用jqueryclosest到达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>

jQuery 为容器中的元素 x 切换 class

jQuery toggle class for element x in container

jquery

parent

toggle