在循环中重复Javascript document.ready (不使用DRY)

Question

我有一个包含3组单选按钮的HTML代码。每个组在其图像部分中都有一个活动类。(实际上Image标签中的Active-1、Active-2和Active-2 )

<!-------- Select Color ---------->
<div class="color-0">
<!--- Checked --->
    <div>
        <input type="radio" data-image="navy-blue-0" id="navy-blue-0" name="color-0" value="navy-blue-0" checked>
        <label for="navy-blue-0"><span></span></label>
    </div>
    <div>
        <input type="radio" data-image="aqua-0" id="aqua-0" name="color-0" value="aqua-0">
        <label for="aqua-0"><span></span></label>
    </div>
    <div>
        <input type="radio" data-image="pink-0" id="pink-0" name="color-0" value="pink-0">
        <label for="pink-0"><span></span></label>
    </div>
</div>

<div class="color-1">
    <!--- Checked --->
    <div>
        <input type="radio" data-image="navy-blue-1" id="navy-blue-1" name="color" value="navy-blue-1" checked>
        <label for="navy-blue-1"><span></span></label>
    </div>
    <div>
        <input type="radio" data-image="aqua-1" id="aqua-1" name="color-1" value="aqua-1">
        <label for="aqua-1"><span></span></label>
    </div>
    <div>
        <input type="radio" data-image="pink-1" id="pink-1" name="color-1" value="aqua-1">
        <label for="pink-1"><span></span></label>
    </div>
</div>
<div class="color-2">
    <!--- Checked --->
    <div>
        <input type="radio" data-image="navy-blue-2" id="navy-blue-2" name="color-2" value="navy-blue-2" checked>
        <label for="navy-blue-2"><span></span></label>
    </div>
    <div>
        <input type="radio" data-image="aqua-2" id="aqua-2" name="color-2" value="aqua-2">
        <label for="aqua-2"><span></span></label>
    </div>
    <div>
        <input type="radio" data-image="pink-2" id="pink-2" name="color-2" value="aqua-2">
        <label for="pink-2"><span></span></label>
    </div>
</div>


<!-------- Show Image ---------->

<div class="img-0">
    <!--- Active-0 --->
    <img class="img-fluid active-0" data-image="navy-blue-0" src="img/img-navy-blue-0.png" alt="">
    <img class="img-fluid" data-image="aqua-0" src="img/img-aqua-0.png" alt="">
    <img class="img-fluid" data-image="pink-0" src="img/img-pink-0.png" alt="">
    <img class="img-fluid" data-image="red-0" src="img/img-red-0.png" alt="">
    <img class="img-fluid" data-image="white-0" src="img/img-white-0.png" alt="">
</div>
<div class="img-1">
    <!--- Active-1 --->

    <img class="img-fluid active-1" data-image="navy-blue-1" src="img/img-navy-blue-1.png" alt="">
    <img class="img-fluid" data-image="aqua-1" src="img/img-aqua-1.png" alt="">
    <img class="img-fluid" data-image="pink-1" src="img/img-pink-1.png" alt="">
    <img class="img-fluid" data-image="red-1" src="img/img-red-1.png" alt="">
    <img class="img-fluid" data-image="white-1" src="img/img-white-1.png" alt="">
</div>
<div class="img-2">
    <!--- Active-2 --->
    <img class="img-fluid active-2" data-image="navy-blue-2" src="img/img-navy-blue-2.png" alt="">
    <img class="img-fluid" data-image="aqua-2" src="img/img-aqua-2.png" alt="">
    <img class="img-fluid" data-image="pink-2" src="img/img-pink-2.png" alt="">
    <img class="img-fluid" data-image="red-2" src="img/img-red-2.png" alt="">
    <img class="img-fluid" data-image="white-2" src="img/img-white-2.png" alt="">
</div>

现在的问题是，我必须在JavaScript中编写三次代码：

    $(document).ready(function () {
    $('.color-0 input').on('click', function () {
        var x = $(this).attr('data-image');
        $('.active-0').removeClass('active-0');
        $('.img-0 img[data-image = ' + x + ']').addClass('active-0');
        $(this).addClass('active-0');
    });
});

    $(document).ready(function () {
    $('.color-1 input').on('click', function () {
        var x = $(this).attr('data-image');
        $('.active-1').removeClass('active-1');
        $('.img-1 img[data-image = ' + x + ']').addClass('active-1');
        $(this).addClass('active-1');
    });
});

    $(document).ready(function () {
    $('.color-2 input').on('click', function () {
        var x = $(this).attr('data-image');
        $('.active-2').removeClass('active-2');
        $('.img-2 img[data-image = ' + x + ']').addClass('active-2');
        $(this).addClass('active-2');
    });
});

所以我试着使用循环，但代码不起作用。如下所示：

var shoePart = [0, 1, 2, 3];
for (var i = 0; i < shoePart.length; i++) {
    $(document).ready(function () {
        $('.color-' + shoePart[i] + ' input').on('click', function () {
            var x = $(this).attr('data-image');
            $('.active-' + shoePart[i]).removeClass('active-' + shoePart[i]);
            $('.img-' + shoePart[i] + ' img[data-image = ' + x + ']').addClass('active-' + shoePart[i]);
            $(this).addClass('active-' + shoePart[i]);
        });
    });
}

Answer 1

您可以在所有三个标记上添加一个公共类和一个属性number。然后可以在上面调用jQuery，如下所示：

<!-------- Select Color ---------->
<div class="color-0 common-color" attr-number="0">
<!--- Checked --->
    <div>
        <input type="radio" data-image="navy-blue-0" id="navy-blue-0" name="color-0" value="navy-blue-0" checked>
        <label for="navy-blue-0"><span></span></label>
    </div>
    <div>
        <input type="radio" data-image="aqua-0" id="aqua-0" name="color-0" value="aqua-0">
        <label for="aqua-0"><span></span></label>
    </div>
    <div>
        <input type="radio" data-image="pink-0" id="pink-0" name="color-0" value="pink-0">
        <label for="pink-0"><span></span></label>
    </div>
</div>

<div class="color-1 common-color" attr-number="1">
    <!--- Checked --->
    <div>
        <input type="radio" data-image="navy-blue-1" id="navy-blue-1" name="color" value="navy-blue-1" checked>
        <label for="navy-blue-1"><span></span></label>
    </div>
    <div>
        <input type="radio" data-image="aqua-1" id="aqua-1" name="color-1" value="aqua-1">
        <label for="aqua-1"><span></span></label>
    </div>
    <div>
        <input type="radio" data-image="pink-1" id="pink-1" name="color-1" value="aqua-1">
        <label for="pink-1"><span></span></label>
    </div>
</div>
<div class="color-2 common-color" attr-number="2">
    <!--- Checked --->
    <div>
        <input type="radio" data-image="navy-blue-2" id="navy-blue-2" name="color-2" value="navy-blue-2" checked>
        <label for="navy-blue-2"><span></span></label>
    </div>
    <div>
        <input type="radio" data-image="aqua-2" id="aqua-2" name="color-2" value="aqua-2">
        <label for="aqua-2"><span></span></label>
    </div>
    <div>
        <input type="radio" data-image="pink-2" id="pink-2" name="color-2" value="aqua-2">
        <label for="pink-2"><span></span></label>
    </div>
</div>

然后可以调用jQuery，如下所示：

$(document).ready(function () {
    $('.common-color input').on('click', function () {
        var x = $(this).attr('data-image');
        var elemCounter = $(this).closest(".common-color").attr("attr-number");
        $('.active-'+elemCounter).removeClass('active-'+elemCounter);
        $('.img-'+ elemCounter +' img[data-image = ' + x + ']').addClass('active-'+elemCounter);
        $(this).addClass('active-'+elemCounter);
    });
});

希望它能帮助你！！