Добавить элемент в список с помощью функции карты (javascript) - PullRequest
Новая
       0

Добавить элемент в список с помощью функции карты (javascript)

0 голосов
/ 17 июня 2020

У меня есть список кнопок. Здесь я отображаю свои кнопки, используя функцию карты, поскольку количество кнопок определяется количеством элементов в списке, например, «myList» состоит из 4 букв. Однако в других случаях списки будут содержать другое количество букв.

Цвет кнопок также зависит от другого списка под названием «myColors», и это также может измениться в других случаях.

Тем не менее, я всегда буду показывать кнопку «Готово» в нижней части меню кнопок, хотя длина списка зависит от случая. Я бы хотел, чтобы эта кнопка была размещена в том же меню (#buttonGallery), чтобы форматирование было согласованным. Кто-нибудь знает, как сделать в функцию карты вставить кнопку "готово"?

Заранее большое спасибо! (Любые советы по редактированию этого сообщения, чтобы сделать его более понятным, также будут оценены.)

Код ниже: (сейчас вы можете видеть, что я напрямую установил положение кнопки «Готово») 

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style media="screen">
    .buttons {
      width: 150px;
      height: 50px;
      border: solid 2px black;
      text-align: center;
      color: black;
      cursor: pointer;
      background-color: white;
      margin: 2px;
    }

    #buttonGallery {
      margin: 10px;
      padding: 10px;
      border: solid 2px black;
      width: 155px;
    }

    #done {
      width: 150px;
      height: 50px;
      border: solid 2px black;
      text-align: center;
      color: black;
      cursor: pointer;
      background-color: white;
      margin: 2px;
    }
  </style>
</head>

<body>

  <div id="done">
    <p>done</p>
  </div>

  <script type="text/javascript">
    let $buttons = $('<div id="buttonGallery">');
    let myList = ["A", "B", "C", "D"];
    let myColors = ["red", "green", "blue", "red"];

    myList.map(function(letter, index) {
      let $button = $("<div></div>")
        .addClass("buttons")
        .attr("id", "button_" + letter)
        .html("<p>" + letter + "</p>")
        .on("mouseenter", function() {
          $(this).css("background", myColors[index]);
        })
        .on("mouseleave", function() {
          if (!$(this).hasClass('clicked')) {
            $(this).css("background", "transparent");
          }
        })
        .on("click", function() {
          $(this).css("background", myColors[index]);
          $(this).addClass('clicked');
        })
      $buttons.append($button);
    });

    $("body").append($buttons);

    $("#done").on("click", clearColor);

    function clearColor() {
      $(".buttons").css({
        backgroundColor: 'transparent'
      });
      $(".buttons").removeClass('clicked');
    }
  </script>
</body>

</html>

Я надеюсь, что результат будет выглядеть следующим образом: enter image description here

Ответы [ 3 ]

1 голос
/ 17 июня 2020

Быстрый ответ - вы можете просто добавить его к элементу, удерживающему кнопки:

$("#done").appendTo("#buttonGallery")

Здесь я позволил вашим кнопкам делать меньше работы, изменив поведение из .on() за пределами .map, где вы генерируете свои кнопки из значений объекта. Получить значения можно несколькими способами, но, используя ваши массивы, я просто добавил цвет к кнопке, когда сгенерировал ее как атрибут data, который можно использовать для отображения / скрытия и «исправления» цвета при нажатии. Для развлечения я также показываю, как «переключать» цвет при втором щелчке.

Поскольку вы создаете div для своей галереи кнопок, я добавил его в HTML вместо этого, чтобы упростить код. немного. 

let myList = ["A", "B", "C", "D"];
let myColors = ["red", "green", "blue", "red"];
let gallery = $("#buttonGallery");// cache the reference to use elsewhere
myList.map(function(letter, index) {
  let $button = $("<div class='buttons'><p></p></div>");
  $button
    .data("mycolor", myColors[index])
    .attr("id", "button_" + letter)
    .find("p")
    .html(letter);
  $button.appendTo(gallery);
});

gallery
  .on("mouseenter", ".buttons", function() {
    $(this).css("background", $(this).data("mycolor"));
  })
  .on("mouseleave", ".buttons", function() {
    if (!$(this).is('.clicked')) {
      $(this).css("background-color", "");
    }
  })
  .on("click", ".buttons", function() {
    let isClicked = $(this).is('.clicked');
    let x = $(this).css('background-color');
    if (x == $(this).data("mycolor")) {
      $(this).css("background", $(this).data("mycolor"));
    }
    $(this).toggleClass('clicked', !isClicked);
  });

$("#done")
  .appendTo(gallery)
  .on("click", clearColor);

function clearColor() {
  $(".buttons")
    .removeClass('clicked')
    .css({
      backgroundColor: ''
    });
}
.buttons {
  width: 150px;
  height: 50px;
  border: solid 2px black;
  text-align: center;
  color: black;
  cursor: pointer;
  background-color: white;
  margin: 2px;
}

#buttonGallery {
  margin: 10px;
  padding: 10px;
  border: solid 2px black;
  width: 155px;
}

#done {
  width: 150px;
  height: 50px;
  border: solid 2px black;
  text-align: center;
  color: black;
  cursor: pointer;
  background-color: white;
  margin: 2px;
}
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div id="done">
    <p>done</p>
  </div>
  <div id="buttonGallery"></div>
</body>

</html>
0 голосов
/ 17 июня 2020 
<body>
<div id="buttonGallery"> <!-- add this line -->
  <div id="done">
    <p>done</p>
  </div>
</div> <!-- add this line -->
  <script type="text/javascript">
//    let $buttons = $('<div id="buttonGallery">'); <-- remove this line
    let $buttonGallery = $("#buttonGallery");
    let myList = ["A", "B", "C", "D"];
    let myColors = ["red", "green", "blue", "red"];

    $buttonGallery.children(":not(#done)").remove(); // <-- add this to remove added button except done button.

    myList.map(function(letter, index) {
      let $button = $("<div></div>")
        .addClass("buttons")
        .attr("id", "button_" + letter)
        .html("<p>" + letter + "</p>")
        .on("mouseenter", function() {
          $(this).css("background", myColors[index]);
        })
        .on("mouseleave", function() {
          if (!$(this).hasClass('clicked')) {
            $(this).css("background", "transparent");
          }
        })
        .on("click", function() {
          $(this).css("background", myColors[index]);
          $(this).addClass('clicked');
        })
      $("#done").before($button); // <-- edit this line
    });

    // $("body").append($buttons); <-- remove this line

    $("#done").on("click", clearColor);

    function clearColor() {
      $(".buttons").css({
        backgroundColor: 'transparent'
      });
      $(".buttons").removeClass('clicked');
    }
  </script>
</body>
0 голосов
/ 17 июня 2020

.map () возвращает массив. Вы пробовали присвоить его переменной? 

buttons = myList.map(...)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...