在 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) ，因為它始終是正確的。