Javascript document.ready repeat in loop (Without DRY)

Question

我有一个包含 3 组单选按钮的 HTML 代码。 每个组在其图像部分中都有一个活动类。(实际上是图像标签中的活动-1、主动-2 和活动-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

您可以在所有三个标签上添加一个公共类和一个数字属性。然后可以致电您的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);
});
});

希望对您有所帮助！！