Question

我正在试图找出如何隐藏运费选项，以便客户无法查看并选择其中一个快递选项是否包含“Courier Rural”字样

概要。

Hide Courier DIV （包括shippingprice）选项如果Courier Rural DIV 存在。

实施例

<div class="shippingmethodlist">
     <div class="shippingmethod" id="trShippingMethod_1">
        <span id="tdShippingTitle_1" class="shippingmethodname">
          <label class="shippingmethod-label" >Courier</label>
        </span>
        <span class="shippingprice">
          <span id="tdShippingPrice_1">$0.00</span>
        </span>
     </div>
     <div class="shippingmethod" id="trShippingMethod_2">
        <span id="tdShippingTitle_2" class="shippingmethodname">
          <label class="shippingmethod-label" >Pick up in store</label>
        </span>
        <span class="shippingprice">
          <span id="tdShippingPrice_1">$0.00</span>
        </span>
     </div>
     <div class="shippingmethod" id="trShippingMethod_3">
        <span id="tdShippingTitle_3" class="shippingmethodname">
          <label class="shippingmethod-label" >Courier Rural</label>
        </span
        <span class="shippingprice">
          <span id="tdShippingPrice_1">$0.00</span>
        </span>
     </div>
</div>


jq(function () {
 if (jq(".shippingmethod-label").text() == "Courier Rural") {
     jq(".shippingmethod-label").text() == "Courier").hide();
 }
});

编辑：让我澄清一下，我希望隐藏整个div，而不仅仅是标签

Answer 1

如果存在“Courier Rural”标签，则使用.shippingmethod-label类迭代元素并在文本等于“Courier”时隐藏其父级

$(document).ready(function() {
  if ($(".shippingmethod-label:contains('Courier Rural')").size()) {
    $(".shippingmethod-label").each(function() {
      if ($(this).html() === "Courier") {
        $(this).parent().parent().hide();
      }
    });
  }
});

JSFiddle

Answer 2

不确定您需要隐藏哪个div，但请尝试

if ($('.shippingmethod-label:contains("Courier Rural")')) {
    $('.shippingmethodlist').find('.shippingmethod-label:contains("Courier")').hide();
}

Answer 3

这是数据属性的一个很好的用例。为每个看起来像这样的div添加一个属性：

<div class="shippingmethod" data-purpose="something"></div>

<div class="shippingmethod" data-purpose="somethingelse"></div>

然后你可以像使用JS函数中的标签选择器那样使用数据属性。

jq(function () {
    jq('.shippingmethod[data-purpose="something"]').hide();
});

编辑（基于OP的评论）

如果您无法更改模板html，并且您必须在div中查找元素，那么您可以使用.parent()函数。

jq(function () {
    var courierOption, hideIt;
    jq('.shippingmethod-label').each(function(index, element) {
        if (element.text() === 'Courier Rural') {
            hideIt = true;
        } else if (element.text() === 'Courier') {
            courierOption = element.parent();
        }
    });

    if (hideIt) {
        courierOption.hide();
    }
});

Answer 4

根据我的理解，如果存在“Courier Rural”选项，您希望隐藏不同的运输选项（比如说“Courier”）。

这是可能的。你可以这样做：

var hideMe;
var shouldHide = false;

$(".shippingmethod-label").each(function() {
  var el = $(this);
  if (el.text() === "Courier") {
    hideMe = el;
  } else if (el.text() === "Courier Rural") {
    shouldHide = true;
  }
});

if (hideMe && shouldHide) {
  hideMe.hide(); // or hideMe.parent().hide(); based on your needs
}

但是，如果这是针对真实网站而不仅仅是思考实验，则应在后端处理。

隐藏div包含某个文本然后隐藏另一个div选项

4 个答案: