Измените все цвета Div в контейнере после каждого клика - PullRequest
Новая
       1

Измените все цвета Div в контейнере после каждого клика

0 голосов
/ 01 марта 2020

Здравствуйте, я новичок в javascript. Я пытаюсь изменить цвет всех элементов Div в контейнере при каждом нажатии.

Пример. При первом щелчке я хочу, чтобы все элементы Div отображались красным цветом. На втором клике я хочу, чтобы все div-ы казались зелеными! 

<!doctype html>
 <html lang="en">
  <head>
  <!-- Required meta tags -->
   <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
       <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
        <!--jquery easing plugin-->
         <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
         <!--custom css---->
         <link href="css/phcoding.css" type="text/css" rel="stylesheet">
          <title>cliciks</title>
          <style>
          </style>
           </head>
           <body>
<div id="container" onclick="myFunction();">
<div id="div1">This is div 1</p>
<div id="div2">This is div 2</p>
<div id="div3">This is div 3</p>
</div>
<script>
function  myFunction(){
    let x = document.getElementById("container");
    y=x.children;
    for(let i = 0; i< y.length;i++){
        y[i].style.color="red";
        y[i].style.color="green";
    }
}
myFunction();
</script>
          </body>
         </html>

Ответы [ 6 ]

0 голосов
/ 01 марта 2020

В вашем HTML много ошибок, вы открываете "

" и закрываете их с помощью "". И в вашем JS вы делаете безусловный l oop, в котором вы передаете своим элементам «красный» стиль, а затем «зеленый» стиль, в этом случае результат всегда будет зеленым. Здесь исправлены HTML и JS. 

document.getElementById('container').addEventListener('click', myFunction)

function myFunction() {
  let divs = document.getElementsByClassName("color")

  if (divs[0].style.color === "green") {
    Array.prototype.map.call(divs, (div) => {
      div.style.color = "red"
    })
  } else {
    Array.prototype.map.call(divs, (div) => {
      div.style.color = "green"
    })
  }
}
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
  <!--jquery easing plugin-->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <!--custom css---->
  <link href="css/phcoding.css" type="text/css" rel="stylesheet">
  <title>cliciks</title>
  <style>

  </style>
</head>

<body>
  <!-- <div id="container" onclick="myFunction();"> -->
  <div id="container">
    <!-- <div id="div1">This is div 1</p> -->
    <div class="color">
      <p>This is div 1</p>
    </div>
    <!-- <div id="div2">This is div 2</p> -->
    <div class="color">
      <p>This is div 2</p>
    </div>
    <!-- <div id="div3">This is div 3</p> -->
    <div class="color">
      <p>This is div 3</p>
    </div>
  </div>
  <script src="index.js">
  </script>
</body>
0 голосов
/ 01 марта 2020

Составьте список цветов, затем проведите через них oop. Пример: 

$("#changeColor").click(function() {
        var currentColor = $(".con-child").css("background-color");
        var colorList = ["rgb(255, 0, 0)", "rgb(0, 255, 0)", "rgb(0, 0, 255)"];
          var next = colorList[($.inArray(currentColor, colorList) + 1) % colorList.length];
          $(".con-child").css("background-color", next);
        });
.con-child {
    display: block;
    height: 100px;
    width: 100px;
    background-color: red;
    margin-bottom: 30px;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="containt" id="changeColor">
  <div class="con-child">
   
  </div>
  <div class="con-child">
    
  </div>
  <div class="con-child">
    
  </div>
</div>

Редактировать !!!

Если вы хотите изменить цвет текста, вы можете удалить «фон» из JS: 

$("#changeColor").click(function() {
        var currentColor = $(".con-child").css("color");
        var colorList = ["rgb(255, 0, 0)", "rgb(0, 255, 0)", "rgb(0, 0, 255)"];
          var next = colorList[($.inArray(currentColor, colorList) + 1) % colorList.length];
          $(".con-child").css("color", next);
    console.log(currentColor);
console.log(next);
        });

Если вы не хотите иметь дело с RGB, а не с HEX, вот хороший ответ, как конвертировать эти два { ссылка }

0 голосов
/ 01 марта 2020

Как гибрид предыдущих ответов ... 

<div id="container">
    <div>This is div 1</div>
    <div>This is div 2</div>
    <div>This is div 3</div>
</div>
<script>
    document.getElementById('container').addEventListener('click',function(e){
        Array.from( this.querySelectorAll('div') ).forEach( div=>{
            let colour;
            switch( div.style.color ){
                case '':colour='red';break; //default
                case 'red':colour='green';break;
                case 'green':colour='red';break;
            }
            div.style.color=colour;
        })
    });
</script>

Если вы не указали c необходимость атрибутов ID для дочерних элементов div, то их можно удалить, хотя вы ДОЛЖНЫ гарантировать, что начальный и конечный теги совпадают, поэтому <div>...</p> неверно !!

0 голосов
/ 01 марта 2020

Это должно ответить на ваш вопрос.

Для начинающих этот ресурс может оказаться полезным. https://vanillajstoolkit.com/helpers/

(function () {
    var clickHandler = function (event) {
        // Choose your target, in this instance all divs
        var target = document.querySelectorAll('div');

        // Loop through the targets
        for (var i = 0; i < target.length; i++) {

            // If the color is not red, make it red
            if (target[i].style.backgroundColor != 'red') {
                target[i].style.backgroundColor = 'red';
            } else {
                // If the color is red, it must be defacto green
                target[i].style.backgroundColor = 'green';
            }

        }
    };
    // Every time a click happens on screen, clickHandler will fire
    document.addEventListener('click', clickHandler, false);

}());
0 голосов
/ 01 марта 2020

Прежде всего вам нужно цветовое отображение: 

var color = {
    "1": "red",
    "2": "green"
};

Затем мы добавляем прослушиватель событий и инициализируем счетчик кликов: 

var clickCount = 0;
var container = document.getElementById("container");
container.addEventListener("click", function (e)
{
    clickCount++;
    container.querySelectorAll("div[id^=\"div\"]").forEach(function (element)
    {
        element.style.color = color[clickCount];
    });
});

С наилучшими пожеланиями.

0 голосов
/ 01 марта 2020

Попробуйте: 

$(".container").on("click",function(){
     if($(this).css("color") == "red"){
           $(this).css("color","green");
     }else{
           $(this).css("color","red");
     }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...