在 Javascript 中，如何使第二个 if 语句在另一个 if 语句中运行？

Question

我已经设置了一些 JS（使用 jQerry 库），但它没有像我预期的那样工作。 我对 Javascript 还很陌生，所以我在网上做了很多工作，以了解是否可以在If中运行If ，并得出结论。

代码在做什么应该是不言自明的。 简而言之......它正在测试下拉选择器上的自定义属性中的布尔值（“主要if语句”）； 并且，在这两个主要结果（真或假）中，它正在测试三种不同的屏幕宽度（“辅助if语句”）。

它在https://beautifytools.com/上验证，没有错误。 所以语法似乎不是问题。

我的 JS：

 var widthMobile;
 var widthTablet;
 var widthDesktop;
    $(window).resize(function(){
            if (($(window).width()<651) && ($(window).width()<981)) // mobile
            {
                widthMobile = true;
                widthDesktop = false;
                widthTablet = false;
                console.log('Mobile:'+widthMobile);

            } else if (($(window).width()>=981)) // Desktop
            {
                widthTablet = false;
                widthMobile = false;
                widthDesktop = true;
                console.log('Desktop:'+widthDesktop);

            } else if (($(window).width()>=651) && ($(window).width()<981)) // Tablet
            {
                widthTablet = true;
                widthMobile = false;
                widthDesktop = false;
                console.log('Tablet:'+widthTablet);
            }
    });
    
$(document).ready(function() {
    $('#pa_size').change(function() {
    console.log('selector changed');    
        if ($("#pa_size").find("option:selected").attr('stock-status') == "false") { //out of stock
        
            $("#sticky-atc-bar .single_add_to_cart_button").hide();
            console.log('button hidden');
            if (widthDesktop) { // Desktop
                $("#sticky-atc-bar").css({"height": "120px"});
                $("#sticky-atc-bar .et_pb_module.et_pb_wc_add_to_cart").css({"margin-top": "-27px"});
                console.log('Desktop and in stock');
            } else if (widthTablet) {
                $("#sticky-atc-bar").css({"height": "115px"}); // Tablet
                $("#sticky-atc-bar .et_pb_module.et_pb_wc_add_to_cart").css({"margin-top": "10px"});
                console.log('Tablet and in stock');
            } else if (widthMobile) {
                $("#sticky-atc-bar").css({"height": "190px"}); // Mobile
                $("#sticky-atc-bar .et_pb_module.et_pb_wc_add_to_cart").css({"margin-top": "12px"});                
                console.log('Mobile and in stock');

            }
            
        } else { // In stock
        
//          $("#sticky-atc-bar .woocommerce-variation-availability").hide();
            $("#sticky-atc-bar .single_add_to_cart_button").show();
            
      console.log('button shown');
      
            if (widthDesktop) { // Desktop
                $("#sticky-atc-bar").css({"height": "100px"});
                $("#sticky-atc-bar .et_pb_module.et_pb_wc_add_to_cart").css({"margin-top": "-17px"});
                console.log('Desktop and NOT in stock');
                
            } else if (widthTablet) {
                $("#sticky-atc-bar").css({"height": "115px"}); // Tablet
                $("#sticky-atc-bar .et_pb_module.et_pb_wc_add_to_cart").css({"margin-top": "10px"});
                console.log('Tablet and NOT in stock');

            } else if (widthMobile) {
                $("#sticky-atc-bar").css({"height": "150px"}); // Mobile
                $("#sticky-atc-bar .et_pb_module.et_pb_wc_add_to_cart").css({"margin-top": "10px"});                
                console.log('Mobile and NOT in stock');

            }
        }
    }).trigger("change");
});

的HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sticky-atc-bar">
  <div id="inside-container">
    <select id="pa_size" class="" name="attribute_pa_size" data-attribute_name="attribute_pa_size" data-show_option_none="yes">
      <option value="1kg" stock-status="true" class="attached enabled">1kg - $75.90 &nbsp;- (In Stock)</option>
      <option value="2kg" stock-status="false" class="attached enabled">2kg - $119.90 &nbsp;- (No Stock)</option>
      <option value="3kg" selected="selected" stock-status="false" class="attached enabled">3kg - $174.90 &nbsp;- (No Stock)</option>
      <option value="5kg" stock-status="false" class="attached enabled">5kg - $262.90 &nbsp;- (No Stock)</option>
      <option value="10kg" stock-status="false" class="attached enabled">10kg - $482.90 &nbsp;- (No Stock)</option>
      <option value="20kg" stock-status="false" class="attached enabled">20kg - $823.90 &nbsp;- (No Stock)</option>
    </select>
    <button type="submit" class="single_add_to_cart_button button alt disabled wc-variation-is-unavailable">Add to cart</button>
  </div>

<div class="test">
TEST
</div>
  <div class="et_pb_module et_pb_wc_add_to_cart">
    <p>
      some content
    </p>
  </div>
</div>

正如您将看到的，它正在运行主要if语句，但不是主要 if 语句中的辅助if语句。

我在这里为它设置了一个 jFiddle。

两个问题：

1. 是什么导致我的代码不起作用？
2. 即使我们更正了我的代码，是否有不同的更好的方法来获得我想要的结果？

Answer 1

这是一个修改后的 JS 小提琴。 最好使用媒体查询，你可以做很多事情。 仅当 css 已被探索到极限时才使用 JS。

但就是说，你提到你想动态更改类，所以我为你设置了这个，看看你怎么能做到这一点https://jsfiddle.net/7u1gcmL5/8/

也只是为了帮助您熟悉 JQuery，向您展示如何简化您的一些代码。 我不想做这一切，但至少告诉你一个你可以去的方向。

PS您必须粘贴代码才能链接到jsfiddle，但这显示了如何减少代码

function checkWindowSize(){
    let windowWidth = $(window).width(); // keep it short
    if(windowWidth>=981){
       return 'widthDesktop';
    } else if((windowWidth>=651) && (windowWidth<981)){
      return 'widthTablet';
    }
    return 'widthMobile'; //reduce your ifs and else as much as you can
 }

正如 Trincot 所提到的，您不需要在语句中添加&& (windowWidth<981) ，因为它始终是正确的。