检查元素是否存在并开始一些活动

时间:2016-01-14 15:31:25

标签: javascript jquery html

我有以下代码:



<div class="checkout-related-view__related-row">
  <div class="checkout-related-view__related-row-cell checkout-related-view__related-row-cell--left">
    <input type="checkbox" class="checkbox related-checkbox" id="related-checkbox-7087458-Z22-00025" value="2536" data-role="none">
    <label for="related-checkbox-7087458-Z22-00025">
      <span class="checkbox"></span>
      TV Bed or Adjustable Bed Assembly</label>
  </div>
  <div class="checkout-related-view__related-row-cell checkout-related-view__related-row-cell--right">
    <span class="price"><span class="currency">£</span>0</span>
    <a href="javascript:void(0)" class="checkout-icon checkout-icon-info related-info" data-toggle="popover" title="" data-content="When your new TV or Adjustable bed is delivered we will take care of all the assembly required, completely free of charge."
    data-html="true" data-trigger="focus" tabindex="0" data-original-title="Free Assembly">
      <span class="visuallyhidden">Free Assembly</span>
    </a>
  </div>
  <div class="checkout-related-view__related-row-cell checkout-related-view__related-row-cell--qty">
    <div class="input-combobox input-combobox__with-qty" data-label="Qty" data-range-min="0" data-range-max="1">
      <span class="input-combobox__label">Qty</span>
      <input class="input-combobox__text input-qty" type="text" name="related_products[7087458][2536][qty]" value="0">
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

我正在研究如何检查该块是否包含电视床或可调节床组件以将数量值更改为&#34; 1&#34;。到目前为止,我已设法将值更改为&#34; 1&#34;使用以下JS:

&#13;
&#13;
document.getElementsByClassName("input-combobox__text input-qty")[2].value = "1";
&#13;
&#13;
&#13;

我现在遇到的问题是实际放置一个只有在电视床或可调节床上才能执行JS的逻辑。我试过:contains,但似乎没有用。你能帮忙吗?

情景:

2个具有相同类别的产品:

第1张是Wood Bed

第二个产品是电视床

目前:

如果JS抓住包含电视床的标签和文字,它将在第一个项目上应用数量1,无论是电视床还是木床

结束目标:

如果存在电视床,则将QTY设置为仅1到相关产品

目前我指的是数组并定义要更改的QTY。我也将其称为".input-combobox__text.input-qty"我有什么方法可以使用name = "related_products[7087458][2536][qty]"

来定位特定输入

请参阅:https://jsfiddle.net/ckuxzxms/5/

1 个答案:

答案 0 :(得分:1)

以下是检查和设置的一种方法:

小提琴:https://jsfiddle.net/ckuxzxms/1/

纯JS

var label = document.querySelector('[for="related-checkbox-7087458-Z22-00025"]');
if (label) {
    var text = label.textContent.trim();
    if (text == 'TV Bed or Adjustable Bed Assembly') {
        document.querySelectorAll(".input-combobox__text.input-qty")[0].value = "1";
    }
}

使用querySelector获取标签,检查它是否找到任何内容,如果是,则获取textContent并删除任何空格。然后检查直接相等。稍微更改值的设置以使用querySelectorAll而不是getElementsByClassName。

jQuery:https://jsfiddle.net/ckuxzxms/2/

var label = $('[for="related-checkbox-7087458-Z22-00025"]');
if (label.length > 0) {
    var text = label.text().trim();
    if (text == 'TV Bed or Adjustable Bed Assembly') {
        $(".input-combobox__text.input-qty").val("1");
    }
}