If / Тогда Заявление Jquery - PullRequest
Новая
       22

If / Тогда Заявление Jquery

0 голосов
/ 03 октября 2019 

    <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, и я не знаю, нужны ли мне переменные сверхумоего сценария для этого тоже? спасибо!

1 Ответ

0 голосов
/ 03 октября 2019

Прежде всего, согласно основному правилу html, каждый элемент должен иметь уникальный идентификатор. Вы можете добавить тот же класс к элементу, но ID не должен быть таким же.

Для начала работы с оператором if / else в Jquery, пожалуйста, смотрите код ниже, это просто, если оператор 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>

Надеюсь, это поможет !!

...