如果特定文本显示在范围

时间:2016-08-22 10:22:03

标签: javascript jquery html

如果在跨度中显示特定文本,我正在尝试隐藏div。我正在使用jquery,这是代码:

HTML

<div class=“deliveryUpsellText”>
<p>blabla</p>
</div>


<ul>
  <li class=“error-msg”>
   <ul>
    <li>
     <span> Coupon Code “blabla” is not valid
     </span>
    </li>
   </ul>
  </li>
</ul>


<button type="button" id="cartCoupon" title="Apply Coupon" class="button applycouponhide" onclick="discountForm.submit(false) ; " value="Apply Coupon"><span style="background:none;"><span style="background:none;">Apply</span></span></button>

的jQuery

$j('#cartCoupon').click(function(){
if($j(".error-msg span:contains('blabla')")){
    $j('.deliveryUpsellText').css({"display":"none"});
}

});

它会在点击时隐藏div,但它会忽略if语句。因此,即使跨度中的文本是“猫”,它仍然隐藏div。谁能发现我做错了什么? 此外,由于#cartCoupon按钮具有onclick事件dicountForm.submit(false);,因此在点击时隐藏了deliveryUpsellText,但它未绑定到表单提交,因此一旦提交表单,它就会再次显示。有人知道如何解决这个问题吗?

3 个答案:

答案 0 :(得分:1)

jQuery集合总是很简洁(因为它是一个对象)。您需要检查它是否包含节点(选定的东西)。使用length属性:

if ($j(".error-msg span:contains('blabla')").length) {
    $j('.deliveryUpsellText').css({
        "display": "none"
    });
}

答案 1 :(得分:0)

请尝试这个

$(document).ready(function () {
    $("#cartCoupon").click(function () {
        var errMsg = $(".error-msg ul li span").text();
        if (errMsg.search("blabla") >= 0) {
            $(".deliveryUpsellText").hide();
        }
    });

});

答案 2 :(得分:0)

我认为您正在寻找此查询。它对我有用

&#13;
&#13;
$(function(){
	
	$('#cartCoupon').on('click', function(){
		$('.error-msg').find('span').each(function(){
			var text = $(this).text();
			if(text.indexOf('blabla') >=0 ){
				$(this).hide();
			}
		});
	})
});
&#13;
<ul>
  <li class="error-msg">
   <ul>
    <li>
     <span> Coupon Code “blabla” is not valid </span><br>
     <span> Coupon Code is not valid </span><br>
     <span> Coupon Code is not valid </span>
    </li>
   </ul>
  </li>
</ul>
<button type="button" id="cartCoupon" title="Apply Coupon" class="button applycouponhide"  value="Apply Coupon"><span style="background:none;"><span style="background:none;">Apply</span></span></button>     
&#13;
&#13;
&#13;

相关问题