[英]In Javascript how can I make a second if statement run within another if statement?
I've set up some JS (using jQerry library), and it's not working as I'd expected it to.我已经设置了一些 JS(使用 jQerry 库),但它没有像我预期的那样工作。 I am fairly new to Javascript, so I did a lot of looking around online to find out if running an If
within an If
was possible, and came to the conclusion it is.我对 Javascript 还很陌生,所以我在网上做了很多工作,以了解是否可以在If
中运行If
,并得出结论。
It should be self-explanatory what the code is doing.代码在做什么应该是不言自明的。 In a nut shell ... it's testing for a boolean in a custom attribute on the drop-down selector (the "primary if
statement");简而言之......它正在测试下拉选择器上的自定义属性中的布尔值(“主要if
语句”); AND, within those two primary results (true, or false), it's testing for three different screen widths (the "secondary if
statement").并且,在这两个主要结果(真或假)中,它正在测试三种不同的屏幕宽度(“辅助if
语句”)。
It validates, with no errors, on https://beautifytools.com/ .它在https://beautifytools.com/上验证,没有错误。 So syntax doesn't appear to be the issue.所以语法似乎不是问题。
My JS:我的 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");
});
The HTML:的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 - (In Stock)</option>
<option value="2kg" stock-status="false" class="attached enabled">2kg - $119.90 - (No Stock)</option>
<option value="3kg" selected="selected" stock-status="false" class="attached enabled">3kg - $174.90 - (No Stock)</option>
<option value="5kg" stock-status="false" class="attached enabled">5kg - $262.90 - (No Stock)</option>
<option value="10kg" stock-status="false" class="attached enabled">10kg - $482.90 - (No Stock)</option>
<option value="20kg" stock-status="false" class="attached enabled">20kg - $823.90 - (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>
As you will see, it is running the primary if
statement fine, but not the secondary if
statements within primary one.正如您将看到的,它正在运行主要if
语句,但不是主要 if 语句中的辅助if
语句。
I've set up a jFiddle for it here .我在这里为它设置了一个 jFiddle。
Here is a modified JS fiddle.这是一个修改后的 JS 小提琴。 Its better to use Media Queries, you can do plenty with that.最好使用媒体查询,你可以做很多事情。 Only use JS if css has been explored to its limits.仅当 css 已被探索到极限时才使用 JS。
But that said, you mentioned you want to change classes dynamically, so I set this up for you to see how you could do that https://jsfiddle.net/7u1gcmL5/8/但就是说,你提到你想动态更改类,所以我为你设置了这个,看看你怎么能做到这一点https://jsfiddle.net/7u1gcmL5/8/
Also just to help you get familiar with JQuery, show you how to simplify some of your code.也只是为了帮助您熟悉 JQuery,向您展示如何简化您的一些代码。 I didnt not want to do it all but at least show you a direction you can go.我不想做这一切,但至少告诉你一个你可以去的方向。
PS you have to paste code to link to jsfiddle but this shows how you can reduce code 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
}
As mentioned by Trincot, you dont need to add && (windowWidth<981) in the statement as its always true.正如 Trincot 所提到的,您不需要在语句中添加&& (windowWidth<981) ,因为它始终是正确的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.