If/Then 声明 Jquery

Question

    <title>Interactive Playground</title>
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>


    <style>

         html, body {
        height: 100%;
        margin: 0px;
        position:relative;
        align-items: center;

        }


        .box1{
            height: 100%;
            width:100%;
            position:absolute;
            background-color: white;



        }


        .box2{
            height: 85%;
            width:90%;
            background-color: white;
            display:block;
            position:absolute;

        }

        .box3{
            height: 65%;
            width:80%;
            background-color: white;
            display:block;
            position:absolute;
        }

        .box4{
            height: 45%;
            width:70%;
            background-color: white;
            display:block;
            position:absolute;
        }

         .box5{
            height: 30%;
            width:60%;
            background-color: white;
            display:block;
            position:absolute;
        }

        .box6{
            height: 15%;
            width:50%;
            background-color: white;
            display:block;
            position:absolute;
        }





    </style>

</head>

<body>


     <div id="box" class="box1"></div>

     <div id="box" class="box2"></div>

     <div id="box" class="box3"></div>

     <div id="box" class="box4"></div>

     <div id="box" class="box5"></div>

     <div id="box" class="box6"></div>




    <script>



        var clickCounts = 1;


            $('.box1').mouseenter(function(){
            $(this).css('background', '#ffe1e1');
            });

            $('.box1').mouseleave(function(){
            $(this).css('background', 'white');
            });

             $('.box2').mouseenter(function(){
            $(this).css('background', '#ffd2d2');
            });

            $('.box2').mouseleave(function(){
            $(this).css('background', 'white');
            });

            $('.box3').mouseenter(function(){
            $(this).css('background', '#ffc3c3');
            });

            $('.box3').mouseleave(function(){
            $(this).css('background', 'white');
            });

            $('.box4').mouseenter(function(){
            $(this).css('background', '#ffb7b7');
            });

            $('.box4').mouseleave(function(){
            $(this).css('background', 'white');
            });

             $('.box5').mouseenter(function(){
            $(this).css('background', '#ff9d9d');
            });

            $('.box5').mouseleave(function(){
            $(this).css('background', 'white');
            });

            $('.box6').mouseenter(function(){
            $(this).css('background', '#e58d8d');
            });

            $('.box6').mouseleave(function(){
            $(this).css('background', 'white');
            });

            $( ".box6" ).click(function() {
            $(this).css('background', 'black');
                });

            $( ".box5" ).click(function() {
            $(this).css('background', 'black');
                });

            $( ".box4" ).click(function() {
            $(this).css('background', 'black');
                });

            $( ".box3" ).click(function() {
            $(this).css('background', 'black');
                });

            $( ".box2" ).click(function() {
            $(this).css('background', 'black');
                });

            $( ".box1" ).click(function() {
            $(this).css('background', 'black');

                });

我只需要帮助开始编写 if/then 语句。不是在寻找免费工作 我想在代码的最后一行添加一个 if/then 语句，以便在单击框 1 时出现框 2。这是为了让我设置的不同形状相互影响。

我不确定如何设置 if/then 语句的语法，我也不知道我是否需要在我的脚本顶部设置变量？ 谢谢！

Answer 1

首先按照html的基本规则，每个元素必须有唯一的ID。您可以向元素添加相同的 class，但 ID 不应相同。

要开始使用 Jquery 中的 if/else 语句，请参阅下面的代码，它只是简单的 if/else 语句，演示了它是如何工作的，您可以通过自己的方式探索它我实施的帮助。

$(document).ready(function(){
  $(".box").click(function()
  {
   var id = $(this).attr("id");
   if(id == "box1")
    {
     $(".box2").addClass("appear").toggle();
    }
    else if(id == "box2")
    {
     $(".box3").addClass("appear").toggle();
    }
  });
});

.box
{
    border:none;
    margin-top:10px;
    height:20px;
     
}
.box1
{
 border:solid steelblue 2px;
}
.appear
{
   boder:solid blue 2px;
    background:black;
}

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
  <div id="box1" class="box box1"></div>

  <div id="box2" class="box box2"></div>

  <div id="box3" class="box box3"></div>

  <div id="box4" class="box box4"></div>

  <div id="box5" class="box box5"></div>

  <div id="box6" class="box box6"></div>
</body>

希望对您有所帮助！！

If/Then 声明 Jquery

If/Then Statement Jquery

html

css

jquery

background

colors