我一直在努力找到一个解决方案,但几乎没有遇到我正在努力做的事情的例子,
我们希望一个.find有一个OR操作符和一个.change事件,我在下面尝试的所有方法都不起作用,有什么建议吗?
简而言之:如果div“personalisation-embroidery-choices”中的1-5复选框中的任何一个被选中,它将触发删除复选框6的类和属性。
$('.personalisation-embroidery-choices').find(':checkbox:eq(0)' || ':checkbox:eq(1)' || ':checkbox:eq(2)' || ':checkbox:eq(3)' || ':checkbox:eq(4)' || ':checkbox:eq(5)').change(function(){ // on change of state
if(this.checked) // if changed state is "CHECKED"
{
$('.personalisation-embroidery-choices').find('.wapf-swatch:eq(6)').removeClass('wapf-checked');
$('.personalisation-embroidery-choices').find(':checkbox:eq(6)').removeAttr('checked');
}
});
字符串
目前,只有当复选框(0)被点击时,才会触发移除复选框6的类和属性的触发器。
我甚至试过用逗号分隔.find()
选择器'..','..'和'[..],..
另一个功能,删除1-5,如果第6次被点击-工程罚款
$('.personalisation-embroidery-choices').find(':checkbox:eq(6)').change(function(){ // on change of state
if(this.checked) // if changed state is "CHECKED"
{
$('.personalisation-embroidery-choices').find('.wapf-swatch:eq(0)').removeClass('wapf-checked');
$('.personalisation-embroidery-choices').find('.wapf-swatch:eq(1)').removeClass('wapf-checked');
$('.personalisation-embroidery-choices').find('.wapf-swatch:eq(2)').removeClass('wapf-checked');
$('.personalisation-embroidery-choices').find('.wapf-swatch:eq(3)').removeClass('wapf-checked');
$('.personalisation-embroidery-choices').find('.wapf-swatch:eq(4)').removeClass('wapf-checked');
$('.personalisation-embroidery-choices').find('.wapf-swatch:eq(5)').removeClass('wapf-checked');
$('.personalisation-embroidery-choices').find(':checkbox:eq(0)').removeAttr('checked');
$('.personalisation-embroidery-choices').find(':checkbox:eq(1)').removeAttr('checked');
$('.personalisation-embroidery-choices').find(':checkbox:eq(2)').removeAttr('checked');
$('.personalisation-embroidery-choices').find(':checkbox:eq(3)').removeAttr('checked');
$('.personalisation-embroidery-choices').find(':checkbox:eq(4)').removeAttr('checked');
$('.personalisation-embroidery-choices').find(':checkbox:eq(5)').removeAttr('checked');
}
});
型
HTML
<div class="wapf-field-container wapf-field-multi-image-swatch field-657045e1ddc01 personalisation-embroidery-choices has-conditions" style="width:100%;" for="657045e1ddc01" data-wapf-d="[{"rules":[{"field":"657045e1ddb9c","condition":"==","value":"mtctr","generated":false}]}]">
<div class="wapf-field-label" id="uqID2">
<label><span>Embroidery</span></label>
</div>
<div class="wapf-field-input">
<div class="wapf-image-swatch-wrapper wapf-swatch-wrapper wapf-col--4" style="--wapf-cols:4;--wapf-cols-t:4;--wapf-cols-m:4">
<div class="wapf-swatch wapf-swatch--image has-pricing wapf-tt-wrap" data-dir="t">
<input type="hidden" class="wapf-tf-h" data-fid="657045e1ddc01" value="0" name="wapf[field_657045e1ddc01][]">
<input type="checkbox" id="wapf-2916-657045e1ddc01-25a5p" name="wapf[field_657045e1ddc01][]" class="wapf-input input-657045e1ddc01" data-field-id="657045e1ddc01" value="25a5p" data-wapf-label="Left Breast" data-wapf-pricetype="qt" data-wapf-price="3.5">
<div aria-hidden="true" style="display: none" class="wapf-tt-content"><span class="wapf-ttp"><span>Left Breast <span class="wapf-pricing-hint">(+£3.50)</span></span>
</span>
</div>
</div>
<div class="wapf-swatch wapf-swatch--image has-pricing wapf-tt-wrap" data-dir="t">
<input type="checkbox" id="wapf-2916-657045e1ddc01-xha9q" name="wapf[field_657045e1ddc01][]" class="wapf-input input-657045e1ddc01" data-field-id="657045e1ddc01" value="xha9q" data-wapf-label="Large Front" data-wapf-pricetype="qt" data-wapf-price="7">
<div aria-hidden="true" style="display: none" class="wapf-tt-content"><span class="wapf-ttp"><span>Large Front <span class="wapf-pricing-hint">(+£7.00)</span></span>
</span>
</div>
</div>
<div class="wapf-swatch wapf-swatch--image has-pricing wapf-tt-wrap wapf-checked" data-dir="t">
<input type="checkbox" id="wapf-2916-657045e1ddc01-6km5l" name="wapf[field_657045e1ddc01][]" class="wapf-input input-657045e1ddc01" data-field-id="657045e1ddc01" value="6km5l" data-wapf-label="Large Back" data-wapf-pricetype="qt" data-wapf-price="7">
<div aria-hidden="true" style="display: none" class="wapf-tt-content"><span class="wapf-ttp"><span>Large Back <span class="wapf-pricing-hint">(+£7.00)</span></span>
</span>
</div>
</div>
<div class="wapf-swatch wapf-swatch--image has-pricing wapf-tt-wrap" data-dir="t">
<input type="checkbox" id="wapf-2916-657045e1ddc01-fhkzc" name="wapf[field_657045e1ddc01][]" class="wapf-input input-657045e1ddc01" data-field-id="657045e1ddc01" value="fhkzc" data-wapf-label="Back of Neck" data-wapf-pricetype="qt" data-wapf-price="3.5">
<div aria-hidden="true" style="display: none" class="wapf-tt-content"><span class="wapf-ttp"><span>Back of Neck <span class="wapf-pricing-hint">(+£3.50)</span></span>
</span>
</div>
</div>
<div class="wapf-swatch wapf-swatch--image has-pricing wapf-tt-wrap" data-dir="t">
<input type="checkbox" id="wapf-2916-657045e1ddc01-trytc" name="wapf[field_657045e1ddc01][]" class="wapf-input input-657045e1ddc01" data-field-id="657045e1ddc01" value="trytc" data-wapf-label="Left Arm" data-wapf-pricetype="qt" data-wapf-price="3.5">
<div aria-hidden="true" style="display: none" class="wapf-tt-content"><span class="wapf-ttp"><span>Left Arm <span class="wapf-pricing-hint">(+£3.50)</span></span>
</span>
</div>
</div>
<div class="wapf-swatch wapf-swatch--image has-pricing wapf-tt-wrap" data-dir="t">
<input type="checkbox" id="wapf-2916-657045e1ddc01-n6y5g" name="wapf[field_657045e1ddc01][]" class="wapf-input input-657045e1ddc01" data-field-id="657045e1ddc01" value="n6y5g" data-wapf-label="Right Arm" data-wapf-pricetype="qt" data-wapf-price="3.5">
<div aria-hidden="true" style="display: none" class="wapf-tt-content"><span class="wapf-ttp"><span>Right Arm <span class="wapf-pricing-hint">(+£3.50)</span></span>
</span>
</div>
</div>
<div class="wapf-swatch wapf-swatch--image wapf-tt-wrap" data-dir="t">
<input type="checkbox" id="wapf-2916-657045e1ddc01-uhhg8" name="wapf[field_657045e1ddc01][]" class="wapf-input input-657045e1ddc01" data-field-id="657045e1ddc01" value="uhhg8" data-wapf-label="No Embroidery">
<div aria-hidden="true" style="display: none" class="wapf-tt-content"><span class="wapf-ttp"><span>No Embroidery</span></span>
</div>
</div>
</div>
</div>
</div>
型
1条答案
按热度按时间v9tzhpje1#
您需要检查
personalisation-embroidery-choices
下选中的复选框长度(0-5),如果它> 0,则在6以上执行操作,仅对第6个执行相同操作这样做:
字符串
工作片段:
的数据