如何使用 javascript 在模态中使用按钮为 100 个框之一着色

Question

为了方便起见，我在一个简化的示例中解释了我想做的事情。

我的网站上有 100 个使用简单 html/css 的盒子。（未显示样式）
我写了一些 JS 来打开一个模式，当点击 100 个带有相同模式的框之一时打开该模式 class: class="boxes":

模态框的 ID 为 "modal":

var modal = document.getElementById("modal");
var boxes = document.getElementsByClassName("box");
var boxesLength = boxes.length;

单击任何框时出现模式：

    for (var i = 0; i < boxesLength; i++) {
    boxes[i].onclick = function () {
    modal.style.display = "block";
    };
    }

现在我希望使用打开的模式中的按钮为单击的框着色。不起作用但我最接近的猜测的代码如下所示：

//get the coloring button in the modal which has Id of "green".

var coloring = document.getElementById("green");

coloring.onclick = function () {
boxes[i].style.backgroundColor = "#90EE90";
//closing the modal after clicking which works
modal.style.display = "none";
};

写"boxes[0]"会给第一个方框上色，但这当然不是我想要的。我想给点击的框上色。

感谢您的任何意见。美好的一天！

应要求我添加了一些简单的 html

    //The modal
    <div id="modal">
            <button id="green">Completed</button>
    </div>

    //just some boxes         
    <div class="boxes"></div>
    <div class="boxes"></div>
    <div class="boxes"></div>
    <div class="boxes"></div>
    .... 96 more boxes

Answer 1

我相信你的问题就在这里。你有：for (var i = 0; i < btnsLength; i++) {，但应该指的是 boxesLength 所以 for (var i = 0; i < boxesLength; i++.

这将是 'event delegation' 的理想应用。在这里阅读更多：https://javascript.info/event-delegation.

基本上，您将点击处理程序放在所有框的父容器上，然后使用 target 指向被点击的框。这给你 1 个事件处理程序而不是 100 个。

Answer 2

根据我的理解，您的 issue.You 希望背景颜色显示在单击以显示模态的框上。这是我的解决方案。

//to pass it as a global variable between functions
var randomv = {}
 var modal = document.getElementById("modal");
 var close = document.querySelector('.close')

//get all box
var x = document.getElementById("innerBox").querySelectorAll(".box");
  //for each box execute the following
  x.forEach(box => {
    //on clicking each box, execute a function
    box.addEventListener("click", function () {
      //this references the parent element which in this case is the box
      randomv.parent = this
      //display the modal on clicking the box
      modal.style.display = "block";
    })
  });
  
//hide the modal on clicking the x
close.addEventListener("click", function(){
 modal.style.display = "none"
}); 


  function changeColor() {
  //first ensure the background color is normal for each box
    x.forEach(box => {
      box.style.backgroundColor = "white";
    });
  //reserve the parent element to a variable
    var parent_div = randomv.parent
   //change the parent's bg color
    parent_div.style.backgroundColor = "green";
  }
</script>

  #modal {
      display: none;
    }

    #innerBox {
      width: 100vw;
      display: flex;
      
     
    }
    .box{
      flex-grow: 1;
     
    }
    .close,.box{
     cursor: pointer;
    }

  <div class="container">
  
    <div id="modal">model content
      <div class="close"> x </div>
      <button onclick="changeColor()">green</button>
    </div>
    <div id="innerBox">
      <div class="box 1">box1</div>
      <div class="box 2">box2</div>
      <div class="box 3">box3</div>
      <div class="box 4">box4</div>
    </div>
  </div>

Answer 3

我用 "this" 弄明白了：

    for (var i = 0; i < boxesLength; i++) {
      boxes[i].onclick = function () {
        modal.style.display = "block";
        var koko = this;
        green.onclick = function () {
          koko.style.backgroundColor = "#90EE90";
          modal.style.display = "none";
        };
      };

如何使用 javascript 在模态中使用按钮为 100 个框之一着色

How to color one of a 100 boxes with a button in a modal using javascript

html

javascript

css

modal-dialog