不知道为什么第二个 if else 条件不起作用

Question

即使我选择了图像和日期，代码也不起作用。此外，如果我选择 2020 年 n 说我选择了第一张图片，它应该转到指定的重定向页面...当我选择 2021 年时，相同的第一张图片应该转到另一个页面...如果我使用 else if 给条件“2020 n img”不起作用。对于图像：<div class="swiper-container">            <div class="swiper-wrapper">                <form>                    <div id="img" class="swiper-slide"                        style="background-image: url(./img/nature.png)">                        <b>nature</b>                    </div>                </form>                <div id="img1" class="swiper-slide"                    style="background-image: url(./img/nature1.png)">                    <b>nature1</b>                </div>                <div id="img2 "class="swiper-slide"                    style="background-image: url(./img/nature2.png)">                    <b>nature2</b>                </div>            </div>            <!-- Add Pagination -->            <div class="swiper-pagination"></div>        </div>日期选择器：    <div id="picker">        <p align="center">            <b>Year:</b> <input type="text" id="datepicker">        </p>    </div><script>  $(function() {        $('#datepicker').datepicker({            changeYear: true,            showButtonPanel: true,            dateFormat: 'yy',            onClose: function(dateText, inst) {                 var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();                $(this).datepicker('setDate', new Date(year, 1));            }        });       $("#datepicker").focus(function () {            $(".ui-datepicker-month").hide();            $(".ui-datepicker-calendar").hide();        });    });  </script>[enter image description here][2]

Answer 1

好吧，我想我已经为你编写了很多代码。里面有很多错误。首先，您根本无法像您或我所做的那样使用字符串检查布尔值。布尔值只有真或假。正如我解释的那样，这行代码简直是愚蠢的错误：

isImgClicked.equals("img1")  // This will always be false as isImgClicked is boolean only

现在，这就是我所做的，保持您已经在页面中嵌入了 jquery。如有任何疑问，请随时询问。

        let _img = document.getElementById("img");

        let _img1 = document.getElementById("img1");

        let _img2 = document.getElementById("img2");

        let _btn = document.getElementById("button");

        let isImgClicked = false;

        let isDatePicked = false;

        /* If any event is clicked!!!! */

        $(document).on('click', function(e){

            clickId = e.target.id;           // Get id of clicked element

            pickedDate = $('#datepicker').val();      // Get value of date picked

            // If picked date value is not null, means date is picked

            if(pickedDate.length > 0){

                isDatePicked = true;

            }

            if(clickId == 'img' || clickId == 'img1' || clickId == 'img2'){

                isImgClicked = true;

                selectedImg = clickId;  // Get id of selected image

            }

            if(clickId == 'button')

            {

                if(!isImgClicked)

                {

                    alert("select the Year and Click the car image");

                }

                else 

                {

                    if((selectedImg == "img") && (pickedDate == "2020"))

                        window.location.replace("sample.html");

                    else if((selectedImg == "img") && (pickedDate == "2019"))

                        window.location.replace("sample1.html");

                    else if((selectedImg == "img1") && (pickedDate == "2019"))

                        window.location.replace("sample2.html");

                    else if((selectedImg == "img1") && (pickedDate == "2020"))

                        window.location.replace("sample3.html");

                    else

                        alert("!!!!")

                }

            }

        });

您现在应该能够解决任何其他问题。可能有 div id 的混合匹配可供查找。您可以用这个替换提交按钮的 js 代码并检查错误。谢谢！！！

Answer 2

您是否添加了 jquery 和 jqueryui 库？如果没有，请在代码的开头复制以下行，例如 head 部分：

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

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

此外，更正这一行：

<div id="img2 "class="swiper-slide"

用这条线：

<div id="img2"class="swiper-slide"