javascript - 提交表单后隐藏div

Question

如果 span 元素包含特定单词，我会尝试隐藏一个 div。我遇到的问题是 span 仅在提交表单后出现。我尝试在提交按钮上运行我的隐藏函数 on click 但这不起作用，因为跨度仅在单击按钮并提交表单后显示。我也尝试过在表单的 submit() 上运行它，但也没有成功(发布了我在下面尝试过的代码)。

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>


<form id="discount-coupon-form" action="http://dev.blabla.co.uk/cart/couponPost/" method="post">
.....

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

</form>

jQuery

 $j('#cartCoupon').click(function(){

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

我也试过

$j('#discount-coupon-form').submit(function(){
if ($j(".error-msg span:contains('blabla')").length) {
    $j('.deliveryUpsellText').css({
        "display":"none"
    });
  }
});

有什么想法可以做到这一点吗？

Answer 1

您正在使用此字符作为引号:”

您应该使用其中之一:' 或 "

还有，你有这个:

onclick="discountForm.submit(false) ; "

如果 undefined object discountForm，则在解析 javascript 部分之前会出错。

$(document).ready(function(){
$('#cartCoupon').on('click',function(){
if($('.error-msg').find("span:contains('blabla')").length > 0) {
    $('.deliveryUpsellText').hide();
  }
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>


<form id="discount-coupon-form" action="http://dev.blabla.co.uk/cart/couponPost/" method="post">
.....

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

</form>