javascript - 根据所选框单击提交按钮时网址未打开

Question

我试图让提交按钮根据所选的框打开特定的 url。我目前没有收到带有 url 的警报或新窗口。我使用了一些 jQuery 来切换一个类以显示该框已被选中并将其放入一个函数中，然后我在另一个函数内创建了一个 if else 语句，我在提交按钮的标记内调用了该语句。 这是代码

             $(document).ready(function() {
                 function buttonClicked() {
                  $(".blue").click(function(){
                $(this).toggleClass("red");
                 });
              }
                 return buttonClicked();
             });



            $(document).ready(function() {
                 function greenButtonClicked() {
                  $(".green").click(function(){
                $(this).toggleClass("red2");
                 });
              }
                 return greenButtonClicked();
             });


             function returnUrl() {
                 var greenButton = greenButtonClicked();
                var blueButton = buttonClicked();

              if( greenButton == true) {
                    window.open("https://www.google.com");
                    alert("button clicked!!")
              } else {
                    window.open("https://www.gmail.com");
                    alert("other clicked!!")
              }
             }

            .blue {
                width: 200px;
                height: 100px;
                background-color: blue;
                color: white;
                padding: 25px;
                box-sizing: border-box;
                cursor: pointer;
                transition: all .25s ease-in-out;
            }

            .green {
                width: 200px;
                height: 100px;
                background-color: green;
                color: white;
                padding: 25px;
                box-sizing: border-box;
                cursor: pointer;
                transition: all .25s ease-in-out;
            }

            .red {
                background-color: blue;
                border: 2px solid red;
            }

            .red2 {
                background-color: green;
                border: 2px solid red;
            }

<div class="blue">
 This is a clickable box
</div>
<div class="green">
  This is a clickable box
</div>
<input type="submit" value="Submit" onclick="returnUrl()">

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

Answer 1

$(document).ready(function() {
                  $(".blue").click(function(){
                  greenButtonClicked = false;
                $(this).toggleClass("red");
                 });
                  $(".green").click(function(){
                  greenButtonClicked = true;
                $(this).toggleClass("red2");
                 });
});
var greenButtonClicked = false;
function returnUrl() {
              if( greenButtonClicked == true) {
                    window.open("https://www.google.com");
                    alert("button clicked!!")
              } else {
                    window.open("https://www.gmail.com");
                    alert("other clicked!!")
              }
             }

.blue {
                width: 200px;
                height: 100px;
                background-color: blue;
                color: white;
                padding: 25px;
                box-sizing: border-box;
                cursor: pointer;
                transition: all .25s ease-in-out;
            }

            .green {
                width: 200px;
                height: 100px;
                background-color: green;
                color: white;
                padding: 25px;
                box-sizing: border-box;
                cursor: pointer;
                transition: all .25s ease-in-out;
            }

            .red {
                background-color: blue;
                border: 2px solid red;
            }

            .red2 {
                background-color: green;
                border: 2px solid red;
            }

<div class="blue">
 This is a clickable box
</div>
<div class="green">
  This is a clickable box
</div>
<input type="submit" value="Submit" onclick="returnUrl()">

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

看看这是否有帮助。