Question

我有问题。我有一个无线电组选择，其中每个无线电输入都有一个带有图像的标签。

我试图让所有图像去除所选图像以外的去饱和度。如果没有做出选择（初始状态），则不应该产生任何效果。

Belov是HTML代码。任何提示都非常受欢迎。谢谢！

选择付款网关

                <div class="gateway-container">
                    <label for="gateway1"><img src="img/deposit-0.png" alt="" /></label>
                    <input type="radio" name="gateway" id="gateway1" class="gateway" />
                </div>

                <div class="gateway-container">
                    <label for="gateway2"><img src="img/deposit-1.png" alt="" /></label>
                    <input type="radio" name="gateway" id="gateway2" class="gateway" />
                </div>

                <div class="gateway-container">
                    <label for="gateway3"><img src="img/deposit-2.png" alt="" /></label>
                    <input type="radio" name="gateway" id="gateway3" class="gateway" />
                </div>

                <div class="gateway-container">
                    <label for="gateway4"><img src="img/deposit-3.png" alt="" /></label>
                    <input type="radio" name="gateway" id="gateway4" class="gateway" />
                </div>

                <div class="gateway-container">
                    <label for="gateway5"><img src="img/deposit-4.png" alt="" /></label>
                    <input type="radio" name="gateway" id="gateway5" class="gateway" />
                </div>

                <div class="gateway-container">
                    <label for="gateway6"><img src="img/deposit-5.png" alt="" /></label>
                    <input type="radio" name="gateway" id="gateway6" class="gateway" />
                </div>

                <div class="gateway-container">
                    <label for="gateway7"><img src="img/deposit-6.png" alt="" /></label>
                    <input type="radio" name="gateway" id="gateway7" class="gateway" />
                </div>

                <div class="gateway-container">
                    <label for="gateway8"><img src="img/deposit-7.png" alt="" /></label>
                    <input type="radio" name="gateway" id="gateway8" class="gateway" />
                </div>

                <div class="gateway-container">
                    <label for="gateway9"><img src="img/deposit-8.png" alt="" /></label>
                    <input type="radio" name="gateway" id="gateway9" class="gateway" />
                </div>

Answer 1

您可以遍历未选择的无线电的所有图像：

$("input[name='gateway']:not(:checked)").prev("label").children("img").each(function() {
    //loops through each image corresponding to not checked radio buttons
});

我认为这应该是一个好的开始！

分解选择器：

input[name='gateway']选择名称为gateway

的所有输入

:not(:checked)过滤掉input[name='gateway']

中所有选中的单选按钮

.prev("label")找到之前的label元素

.children("image")获取输入的前一个标签的子图像元素。

对所有图像进行去饱和处理，但使用jquery进行选择

选择付款网关

1 个答案: