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

Question

enter image description here场景:即使我选择图像和日期，代码也不起作用。另外，如果我选择 2020 年 n 说选择第一张图像，它应该转到指定的重定向页面...当我选择 2021 年 n 相同的第一张图像时，它应该转到另一个页面...如果我使用 else if条件“2020 n img”不起作用。

代码:“用于提交按钮”

<p align=center>
            <input type="submit" value="submit" id="button">
        </p>





<script type="text/javascript">
let _img = document.getElementById("img");
let _img1 = document.getElementById("img1");
let _img2 = document.getElementById("img2");
let _picker = document.getElementById("picker");
let _btn = document.getElementById("button");

let isImgClicked = false;
let isDatePicked = false;
_img.addEventListener("click", function(){
  isImgClicked = true;
});
_img1.addEventListener("click", function(){
  isImgClicked = true;
});
_img2.addEventListener("click", function(){
  isImgClicked = true;
});
_picker.addEventListener("click", function(){
  isDatePicked = true;
});
_btn.addEventListener("click", function(){

              if(!isImgClicked || !isDatePicked)
              {
                  alert("select the Year and Click the car image");

              }
              else 
                 {
                  if((isImgClicked == "img") && (isDatePicked == "2020"))
                     {
                        window.location.replace("sample.html");
                     }
                  else if((isImgClicked == "img") && (isDatePicked == "2019"))
                     {
                   window.location.replace("sample1.html");
                     }
                  else
                      {
                        if((isImgClicked == "img1") && (isDatePicked == "2019"))
                  {
                  window.location.replace("sample2.html");
                  }
              else if((isImgClicked == "img1") && (isDatePicked == "2020"))
                  {
                   window.location.replace("sample3.html");
                  }
              else
                  {
                  alert("!!!!")
                  }
                 }
                 }
        });
</script>

对于图像:

<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

嗯，我想我已经为你编写了很多代码。里面有很多错误。首先，你根本无法像你或我那样用字符串检查 bool 值。 bool 值只有 true 或 false。正如我所解释的，这行代码只是一个愚蠢的错误:

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 代码并检查是否有错误。谢谢!!!