jquery .find与OR运算符一起侦听更改

0yycz8jy  于 2024-01-07  发布在  jQuery
关注(0)|答案(1)|浏览(198)

我一直在努力找到一个解决方案，但几乎没有遇到我正在努力做的事情的例子，
我们希望一个.find有一个OR操作符和一个.change事件，我在下面尝试的所有方法都不起作用，有什么建议吗？
简而言之：如果div“personalisation-embroidery-choices”中的1-5复选框中的任何一个被选中，它将触发删除复选框6的类和属性。

  1. $('.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
  2.     if(this.checked) // if changed state is "CHECKED"
  3.     {
  4.         $('.personalisation-embroidery-choices').find('.wapf-swatch:eq(6)').removeClass('wapf-checked');
  5.         $('.personalisation-embroidery-choices').find(':checkbox:eq(6)').removeAttr('checked');
  6.     }
  7. });

字符串
目前，只有当复选框（0）被点击时，才会触发移除复选框6的类和属性的触发器。
我甚至试过用逗号分隔.find()选择器'..'，'..'和'[..]，..
另一个功能，删除1-5，如果第6次被点击-工程罚款

  1. $('.personalisation-embroidery-choices').find(':checkbox:eq(6)').change(function(){ // on change of state
  2.     if(this.checked) // if changed state is "CHECKED"
  3.     {
  4.         $('.personalisation-embroidery-choices').find('.wapf-swatch:eq(0)').removeClass('wapf-checked');
  5.         $('.personalisation-embroidery-choices').find('.wapf-swatch:eq(1)').removeClass('wapf-checked'); 
  6.         $('.personalisation-embroidery-choices').find('.wapf-swatch:eq(2)').removeClass('wapf-checked'); 
  7.         $('.personalisation-embroidery-choices').find('.wapf-swatch:eq(3)').removeClass('wapf-checked'); 
  8.         $('.personalisation-embroidery-choices').find('.wapf-swatch:eq(4)').removeClass('wapf-checked'); 
  9.         $('.personalisation-embroidery-choices').find('.wapf-swatch:eq(5)').removeClass('wapf-checked');
  10.         $('.personalisation-embroidery-choices').find(':checkbox:eq(0)').removeAttr('checked');
  11.         $('.personalisation-embroidery-choices').find(':checkbox:eq(1)').removeAttr('checked'); 
  12.         $('.personalisation-embroidery-choices').find(':checkbox:eq(2)').removeAttr('checked'); 
  13.         $('.personalisation-embroidery-choices').find(':checkbox:eq(3)').removeAttr('checked'); 
  14.         $('.personalisation-embroidery-choices').find(':checkbox:eq(4)').removeAttr('checked'); 
  15.         $('.personalisation-embroidery-choices').find(':checkbox:eq(5)').removeAttr('checked');
  16.     }
  17. });

型
HTML

  1. <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="[{&quot;rules&quot;:[{&quot;field&quot;:&quot;657045e1ddb9c&quot;,&quot;condition&quot;:&quot;==&quot;,&quot;value&quot;:&quot;mtctr&quot;,&quot;generated&quot;:false}]}]">
  2.     <div class="wapf-field-label" id="uqID2">
  3.         <label><span>Embroidery</span></label>
  4.     </div>
  5.     <div class="wapf-field-input">
  6.         <div class="wapf-image-swatch-wrapper wapf-swatch-wrapper wapf-col--4" style="--wapf-cols:4;--wapf-cols-t:4;--wapf-cols-m:4">
  7.             <div class="wapf-swatch wapf-swatch--image has-pricing wapf-tt-wrap" data-dir="t">
  8.                 <input type="hidden" class="wapf-tf-h" data-fid="657045e1ddc01" value="0" name="wapf[field_657045e1ddc01][]">
  9.                 <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">
  10.                 <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>
  11.                     </span>
  12.                 </div>
  13.             </div>
  14.             <div class="wapf-swatch wapf-swatch--image has-pricing wapf-tt-wrap" data-dir="t">
  15.                 <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">
  16.                 <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>
  17.                     </span>
  18.                 </div>
  19.             </div>
  20.             <div class="wapf-swatch wapf-swatch--image has-pricing wapf-tt-wrap wapf-checked" data-dir="t">
  21.                 <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">
  22.                 <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>
  23.                     </span>
  24.                 </div>
  25.             </div>
  26.             <div class="wapf-swatch wapf-swatch--image has-pricing wapf-tt-wrap" data-dir="t">
  27.                 <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">
  28.                 <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>
  29.                     </span>
  30.                 </div>
  31.             </div>
  32.             <div class="wapf-swatch wapf-swatch--image has-pricing wapf-tt-wrap" data-dir="t">
  33.                 <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">
  34.                 <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>
  35.                     </span>
  36.                 </div>
  37.             </div>
  38.             <div class="wapf-swatch wapf-swatch--image has-pricing wapf-tt-wrap" data-dir="t">
  39.                 <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">
  40.                 <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>
  41.                     </span>
  42.                 </div>
  43.             </div>
  44.             <div class="wapf-swatch wapf-swatch--image wapf-tt-wrap" data-dir="t">
  45.                 <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">
  46.                 <div aria-hidden="true" style="display: none" class="wapf-tt-content"><span class="wapf-ttp"><span>No Embroidery</span></span>
  47.                 </div>
  48.             </div>
  49.         </div>
  50.     </div>
  51. </div>

型

jquery

1条答案

按热度按时间
v9tzhpje

v9tzhpje1#

您需要检查personalisation-embroidery-choices下选中的复选框长度（0-5），如果它> 0，则在6以上执行操作，仅对第6个执行相同操作
这样做：

  1. $('.personalisation-embroidery-choices :checkbox:not(:eq(6))').change(function() {
  2.   if ($('.personalisation-embroidery-choices :checkbox:not(:eq(6)):checked').length > 0) {
  3.     $('.personalisation-embroidery-choices').find(':checkbox:eq(6)').removeClass('wapf-checked');
  4.     $('.personalisation-embroidery-choices').find(':checkbox:eq(6)').prop('checked', false);
  5.   }
  6. });
  8. $('.personalisation-embroidery-choices :checkbox:eq(6)').change(function() {
  9.   if ($(this).is(':checked')) {
  10.     $('.personalisation-embroidery-choices :checkbox:not(:eq(6))').removeClass('wapf-checked');
  11.     $('.personalisation-embroidery-choices :checkbox:not(:eq(6))').prop('checked', false);
  12.   }
  13. });

字符串
工作片段：

  1. $('.personalisation-embroidery-choices :checkbox:not(:eq(6))').change(function() {
  2.   if ($('.personalisation-embroidery-choices :checkbox:not(:eq(6)):checked').length > 0) {
  3.     $('.personalisation-embroidery-choices').find(':checkbox:eq(6)').removeClass('wapf-checked');
  4.     $('.personalisation-embroidery-choices').find(':checkbox:eq(6)').prop('checked', false);
  5.   }
  6. });
  8. $('.personalisation-embroidery-choices :checkbox:eq(6)').change(function() {
  9.   if ($(this).is(':checked')) {
  10.     $('.personalisation-embroidery-choices :checkbox:not(:eq(6))').removeClass('wapf-checked');
  11.     $('.personalisation-embroidery-choices :checkbox:not(:eq(6))').prop('checked', false);
  12.   }
  13. });
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. <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="[{&quot;rules&quot;:[{&quot;field&quot;:&quot;657045e1ddb9c&quot;,&quot;condition&quot;:&quot;==&quot;,&quot;value&quot;:&quot;mtctr&quot;,&quot;generated&quot;:false}]}]">
  3.   <div class="wapf-field-label" id="uqID2">
  4.     <label><span>Embroidery</span></label>
  5.   </div>
  6.   <div class="wapf-field-input">
  7.     <div class="wapf-image-swatch-wrapper wapf-swatch-wrapper wapf-col--4" style="--wapf-cols:4;--wapf-cols-t:4;--wapf-cols-m:4">
  8.       <div class="wapf-swatch wapf-swatch--image has-pricing wapf-tt-wrap" data-dir="t">
  9.         <input type="hidden" class="wapf-tf-h" data-fid="657045e1ddc01" value="0" name="wapf[field_657045e1ddc01][]">
  10.         <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">
  11.         <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>
  12.           </span>
  13.         </div>
  14.       </div>
  15.       <div class="wapf-swatch wapf-swatch--image has-pricing wapf-tt-wrap" data-dir="t">
  16.         <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">
  17.         <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>
  18.           </span>
  19.         </div>
  20.       </div>
  21.       <div class="wapf-swatch wapf-swatch--image has-pricing wapf-tt-wrap wapf-checked" data-dir="t">
  22.         <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">
  23.         <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>
  24.           </span>
  25.         </div>
  26.       </div>
  27.       <div class="wapf-swatch wapf-swatch--image has-pricing wapf-tt-wrap" data-dir="t">
  28.         <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">
  29.         <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>
  30.           </span>
  31.         </div>
  32.       </div>
  33.       <div class="wapf-swatch wapf-swatch--image has-pricing wapf-tt-wrap" data-dir="t">
  34.         <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">
  35.         <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>
  36.           </span>
  37.         </div>
  38.       </div>
  39.       <div class="wapf-swatch wapf-swatch--image has-pricing wapf-tt-wrap" data-dir="t">
  40.         <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">
  41.         <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>
  42.           </span>
  43.         </div>
  44.       </div>
  45.       <div class="wapf-swatch wapf-swatch--image wapf-tt-wrap" data-dir="t">
  46.         <input type="checkbox" id="wapf-2916-657045e1ddc01-uhhg8" name="wapf[field_657045e1ddc01][]" class="wapf-input input-657045e1ddc01 wapf-checked" data-field-id="657045e1ddc01" value="uhhg8" data-wapf-label="No Embroidery" checked>
  47.         <div aria-hidden="true" style="display: none" class="wapf-tt-content"><span class="wapf-ttp"><span>No Embroidery</span></span>
  48.         </div>
  49.       </div>
  50.     </div>
  51.   </div>
  52. </div>

的数据

展开查看全部
赞(0）分享  回复(0）举报  2024-01-07
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com