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

0yycz8jy 于 5个月前发布在 jQuery

关注(0)|答案(1)|浏览(74)

我一直在努力找到一个解决方案，但几乎没有遇到我正在努力做的事情的例子，
我们希望一个.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="[{&quot;rules&quot;:[{&quot;field&quot;:&quot;657045e1ddb9c&quot;,&quot;condition&quot;:&quot;==&quot;,&quot;value&quot;:&quot;mtctr&quot;,&quot;generated&quot;: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>

型

jquery

来源：https://stackoverflow.com/questions/77659685/find-with-or-operator-to-listen-for-a-change

1条答案

按热度按时间

v9tzhpje1#

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

$('.personalisation-embroidery-choices :checkbox:not(:eq(6))').change(function() {
  if ($('.personalisation-embroidery-choices :checkbox:not(:eq(6)):checked').length > 0) {
    $('.personalisation-embroidery-choices').find(':checkbox:eq(6)').removeClass('wapf-checked');
    $('.personalisation-embroidery-choices').find(':checkbox:eq(6)').prop('checked', false);
  }
});

$('.personalisation-embroidery-choices :checkbox:eq(6)').change(function() {
  if ($(this).is(':checked')) {
    $('.personalisation-embroidery-choices :checkbox:not(:eq(6))').removeClass('wapf-checked');
    $('.personalisation-embroidery-choices :checkbox:not(:eq(6))').prop('checked', false);
  }
});

字符串
工作片段：

$('.personalisation-embroidery-choices :checkbox:not(:eq(6))').change(function() {
  if ($('.personalisation-embroidery-choices :checkbox:not(:eq(6)):checked').length > 0) {
    $('.personalisation-embroidery-choices').find(':checkbox:eq(6)').removeClass('wapf-checked');
    $('.personalisation-embroidery-choices').find(':checkbox:eq(6)').prop('checked', false);
  }
});

$('.personalisation-embroidery-choices :checkbox:eq(6)').change(function() {
  if ($(this).is(':checked')) {
    $('.personalisation-embroidery-choices :checkbox:not(:eq(6))').removeClass('wapf-checked');
    $('.personalisation-embroidery-choices :checkbox:not(:eq(6))').prop('checked', false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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}]}]">
  <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 wapf-checked" data-field-id="657045e1ddc01" value="uhhg8" data-wapf-label="No Embroidery" checked>
        <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>

的数据

赞(0）回复(0）举报 5个月前

我来回答

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

1条答案

相关问题

热门标签

最新问答