如何根据文本字段的值显示/隐藏某些元素？

Question

我有一个销售登陆页面。我为促销代码添加了文本字段。 这是一个简单的促销代码系统。对于任何促销代码，它总是提供相同的折扣（其想法是为每个影响者创建自定义促销代码）。

我为价格和付款按钮创建了2个DIV。

有默认的DIV价格，没有折扣。页面加载时默认显示。

当访客键入PROMOCODE时，第二个DIV显示折扣和新价格。

一切都可以用一张优惠券。但是我需要使其适用于几种不同的优惠券代码。因此，我添加了运算符“ OR”，但是它不再起作用。

这是我的代码：

    <script type="text/javascript" language="Javascript">
    	
     // Function to hide/show the table based on the values of inputs
    function toggleTable() {


    $('#hideThis').toggle($('#coupon').val() !== 'JDCM' || $('#coupon').val() !== 'PROMOGH2019');
    $('#hideThis3').toggle($('#coupon').val() !== 'JDCM' || $('#coupon').val() !== 'PROMOGH2019');
    $('#showThis').toggle($('#coupon').val() == 'JDCM' || $('#coupon').val() == 'PROMOGH2019');
    $('#showThis2').toggle($('#coupon').val() == 'JDCM' || $('#coupon').val() == 'PROMOGH2019');
    $('#showThis3').toggle($('#coupon').val() == 'JDCM' || $('#coupon').val() == 'PROMOGH2019');
    }

    $(document).ready(function() {
    	// Bind the keyup event on both the inputs, call the function on event
    	$('#coupon').on('keyup', toggleTable).trigger('keyup');
    });

     
     
    		 
    </script>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<form>
<span >Vous avez un code PROMO?</span>
<input type="text" name="coupon" id="coupon" placeholder="Ex: PROMO2019">
</form>
     		
<div id="showThis">
   <div>
      <b style="color:#000000;">Prix HT:<strike>594€</strike></b>
   </div>
</div>
<div id="hideThis">
   <div>
      <b>Prix HT:594€</b>
   </div>
</div>
<div id="showThis2">
   <div>
     <b>Remise  exceptionnelle de -50%</b><br><br>
     <b style="color:#36C503;">Prix final à payer: 297€</b>
   </div>
</div>
    		
<div id="hideThis3">
  <div class="div_button">
     <a href="URL_594_euros" class="myButton"><span>&nbsp;</span>&nbsp;Acheter Maintenant 594€</a>
  </div>
</div>
<div id="showThis3">
  <div class="div_button">
    <a href="URL_297_euros" class="myButton"><span>&nbsp;</span>&nbsp;Acheter Maintenant 297€</a>
  </div>
</div>      

我在这里和Google上到处搜索了同样的问题，但是找不到任何解决方法。

有人可以帮助我，请了解此操作员或“ ||”是什么问题造成这个问题？

Answer 1

您应该更改此行

 $('#hideThis').toggle($('#coupon').val() !== 'JDCM' || $('#coupon').val() !== 'PROMOGH2019');
 $('#hideThis3').toggle($('#coupon').val() !== 'JDCM' || $('#coupon').val() !== 'PROMOGH2019');

对此：

 $('#hideThis').toggle($('#coupon').val() !== 'JDCM' && $('#coupon').val() !== 'PROMOGH2019');
 $('#hideThis3').toggle($('#coupon').val() !== 'JDCM' && $('#coupon').val() !== 'PROMOGH2019');

在您的代码中，当您编写优惠券（如JDCM）时，该优惠券将始终与该条件的其他优惠券有所不同，从而永远不会隐藏原始价格