首页 / 技术问答 / Javascript问答列表 / 问答详情

Javascript .使用OR运算符查找以侦听更改

我一直在努力找到一个解决方案，但几乎没有遇到我正在努力做的事情的例子，

我们希望一个.find有一个OR操作符和一个.change事件，我在下面try 的所有方法都不起作用，有什么建议吗？

简而言之:如果选中了div"Personal-Inbroidery-Options"内的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的类和属性的触发器.

我甚至try 过用逗号分隔.find()个 Select 符‘..’，‘..’和‘[..]，..

另一个功能是，如果点击第6个，则删除1-5个-工作正常

$('.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');
    }
});

超文本标记语言

<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>

推荐答案

您需要判断复选框长度

这样做:

$('.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>

Javascript相关问答推荐

materialized - activeIndex返回-1

通过使用100%间隔时间来代表我们还剩多少时间来倒计时

将自定义排序应用于角形数字数组

PrivateRoute不是路由组件错误

用JavaScript复制C#CRC 32生成器

当作为表达式调用时，如何解析方法decorator 的签名？

加载背景图像时同步旋转不显示的问题

在WordPress中使用带有WPCode的Java代码片段时出现意外令牌错误

在forEach循环中获取目标而不是父对象的属性

如何将数据块添加到d3力有向图中？

基于props 类型的不同props ，根据来自接口的值扩展类型

如何在箭头函数中引入or子句？

在css中放置所需 colored颜色 以填充图像的透明区域

将数组扩展到对象中

如何在AG-Grid文本字段中创建占位符

React Refs不与高阶组件(HOC)中的动态生成组件一起工作

在Press Reaction本机和EXPO av上播放单个文件

如何在css中裁剪成一定Angular 的圆的一部分，而不需要复杂的多边形

从客户端更新MongoDB数据库

如何在单击Search按钮时更新Reaction组件？

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630