使用地图功能添加元素列表（JavaScript的）

psychcoder

我有按钮的列表。在这里，我使用的映射函数，因为按钮的数目是由元素在一个列表中的号码，例如，确定显示我的按钮，“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>

这是我希望的结果是这样的：

Wiyanto谭

<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。