限制可以選擇的焦點元素的數量-有解無憂

目前我的代碼允許用戶選擇任意數量的選項。我需要將其限制為僅 3 個選項。如果用戶改變主意，他們需要能夠取消選擇一個選項，但最多 3 個選項是限制。

var container = document.getElementById('my_dataviz');
var array = ["One", "Two", "Three", "Four", "Five", "Six",
  "Seven", "Eight", "Nine", "Ten"
]
let identifier = 0;

array.forEach(element => {
  var button = document.createElement("button");
  button.className = "btn";
  button.id = element;
  button.value = element;
  button.type = "button";
  var text = document.createTextNode(element);
  button.appendChild(text);
  container.appendChild(button);
});

let btn = document.getElementsByClassName("btn");

for (var i = 0; i < btn.length; i  ) {
  (function(index) {
    btn[index].addEventListener("click", function() {
      console.log("Clicked Button: "   index);

      let isPresent = false;

      this.classList.forEach(function(e, i) {
        if (e == "button-focus") {
          isPresent = true;
        } else {
          isPresent = false;
        }
      });

      if (isPresent) {
        this.classList.remove("button-focus");
      } else {
        this.classList.add("button-focus");
      }
    });
  })(i);
}

:root {
  --primary_orange: #fea501
}

;
.my_dataviz {
  width: auto;
  height: 500px;
  margin-top: 15px;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-around;
}

.my_dataviz button {
  font-size: 16px;
  display: flex;
  justify-content: center;
  width: 120px;
  background-color: Transparent;
  -webkit-tap-highlight-color: transparent;
  background-repeat: no-repeat;
  border: none;
  letter-spacing: 1.6px;
  margin: 10px;
  border: 1px solid transparent;
}

.my_dataviz button:hover {
  box-sizing: border-box;
  background-color: var(--primary_orange);
  font-weight: bold;
  border: 1px solid #000;
  border-radius: 10px;
}

.btn.button-focus {
  background-color: var(--primary_orange);
  color: var(--dark);
  font-weight: bold;
  border: 1px solid #000;
  border-radius: 10px;
}

.modal-footer .modal-btn {
  width: 80px;
  height: 25px;
  border-radius: 5px;
  align-items: center;
  Margin: 30px;
}

<div class="modal-style">
  <div class="my_dataviz" id="my_dataviz">

  </div>
  <div class="modal-footer">
    <input class="modal-btn" type="button" value="Select" />
  </div>
</div>

我已經嘗試使用以下代碼片段，但我需要另一個代碼片段來配合它......我錯過了什么？

var SelectCount=0;
if (SelectCount < 3) {
        
        SelectCount =1;
    }

uj5u.com熱心網友回復：

試試這個，它基本上檢查選定的計數并使用 document.querySelectorAll() 來啟用或禁用所有按鈕。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            --primary_orange: #fea501
        }

        ;

        .my_dataviz {
            width: auto;
            height: 500px;
            margin-top: 15px;
            margin-bottom: 12px;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            justify-content: space-around;
        }

        .my_dataviz button {
            font-size: 16px;
            display: flex;
            justify-content: center;
            width: 120px;
            background-color: Transparent;
            -webkit-tap-highlight-color: transparent;
            background-repeat: no-repeat;
            border: none;
            letter-spacing: 1.6px;
            margin: 10px;
            border: 1px solid transparent;
        }

        .my_dataviz button:hover {
            box-sizing: border-box;
            background-color: var(--primary_orange);
            font-weight: bold;
            border: 1px solid #000;
            border-radius: 10px;
        }

        .btn.button-focus {
            background-color: var(--primary_orange);
            color: var(--dark);
            font-weight: bold;
            border: 1px solid #000;
            border-radius: 10px;
        }

        .modal-footer .modal-btn {
            width: 80px;
            height: 25px;
            border-radius: 5px;
            align-items: center;
            Margin: 30px;
        }
    </style>
</head>

<body>

    <div class="modal-style">
        <div class="my_dataviz" id="my_dataviz">

        </div>
        <div class="modal-footer">
            <input class="modal-btn" type="button" value="Select" />
        </div>
    </div>


    <script>

        const container = document.getElementById('my_dataviz');

        const array = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten"]

        let identifier = 0;
        let SelectCount = 0;

        array.forEach(element => {
            const button = document.createElement("button");
            button.className = "btn";
            button.id = element;
            button.value = element;
            button.type = "button";
            const text = document.createTextNode(element);
            button.appendChild(text);
            container.appendChild(button);
        });

        let btn = document.getElementsByClassName("btn");

        for (let i = 0; i < btn.length; i  ) {
            (function (index) {
                btn[index].addEventListener("click", function () {
                    console.log("Clicked Button: "   index);

                    let isPresent = false;

                    this.classList.forEach(function (e, i) {
                        if (e == "button-focus") {
                            isPresent = true;
                        } else {
                            isPresent = false;
                        }
                    });

                    if (isPresent) {
                        this.classList.remove("button-focus");

                        SelectCount -= 1;
                        document.querySelectorAll('.btn').forEach(item => {
                            if (!item.classList.value.includes('button-focus')) item.disabled = false
                        })

                    } else {
                        this.classList.add("button-focus");

                        SelectCount  = 1;
                        if (SelectCount > 2) {
                            document.querySelectorAll('.btn').forEach(item => {
                                if (!item.classList.value.includes('button-focus')) item.disabled = true
                            })
                        }

                    }
                })
            })(i)
        }
    </script>

</body>
</html>

uj5u.com熱心網友回復：

在按鈕的單擊事件偵聽器中，獲取并計算父元素的選擇：

evt.target.parentNode.querySelectorAll(".btn.button-focus").length

...如果少于三個，則允許選擇：

if ( 3 > evt.target.parentNode.querySelectorAll(".btn.button-focus").length ) {
    // ...

但首先檢查當前是否取消選擇：

if ( this.classList.contains("button-focus") ) {
    // ...
}
else if ( 3 > evt.target.parentNode.querySelectorAll(".btn.button-focus").length ) {
    // ...
}

...如果不取消選擇并且 3 已選擇顯示alert：

if ( this.classList.contains("button-focus") ) {
    // ...
}
else if ( 3 > evt.target.parentNode.querySelectorAll(".btn.button-focus").length ) {
    // ...
}
else {  alert('too many selections'); }

例如：

var container = document.getElementById('my_dataviz');
var array = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten"];
let identifier = 0;

array.forEach(element => {
  var button = document.createElement("button");
  button.className = "btn";
  button.id = element;
  button.value = element;
  button.type = "button";
  var text = document.createTextNode(element);
  button.appendChild(text);
  container.appendChild(button);
});

let btn = document.getElementsByClassName("btn");

for (var i = 0; i < btn.length; i  ) {
  (function(index) {
    btn[index].addEventListener("click", function(evt) {
      console.log("Clicked Button: "   index);

      let isPresent = true;
      
      // deselect
      if ( this.classList.contains("button-focus") ) {
        isPresent = true;
      }
      
      // select if less than 3 selected
      else if ( 3 > evt.target.parentNode.querySelectorAll(".btn.button-focus").length ) {

        this.classList.forEach(function(e, i) {
          if (e == "button-focus") {
            isPresent = true;
          } else {
            isPresent = false;
          }
        });

      }
      
      // alert it not deselecting and 3 are selected
      else { alert("Maximum selection is 3. Remove one before selecting another."); }

      if (isPresent) {
        this.classList.remove("button-focus");
      } else {
        this.classList.add("button-focus");
      }

    });
  })(i);
}

:root {
  --primary_orange: #fea501
}

;
.my_dataviz {
  width: auto;
  height: 500px;
  margin-top: 15px;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-around;
}

.my_dataviz button {
  font-size: 16px;
  display: flex;
  justify-content: center;
  width: 120px;
  background-color: Transparent;
  -webkit-tap-highlight-color: transparent;
  background-repeat: no-repeat;
  border: none;
  letter-spacing: 1.6px;
  margin: 10px;
  border: 1px solid transparent;
}

.my_dataviz button:hover {
  box-sizing: border-box;
  background-color: var(--primary_orange);
  font-weight: bold;
  border: 1px solid #000;
  border-radius: 10px;
}

.btn.button-focus {
  background-color: var(--primary_orange);
  color: var(--dark);
  font-weight: bold;
  border: 1px solid #000;
  border-radius: 10px;
}

.modal-footer .modal-btn {
  width: 80px;
  height: 25px;
  border-radius: 5px;
  align-items: center;
  Margin: 30px;
}

<div class="modal-style">
  <div class="my_dataviz" id="my_dataviz">

  </div>
  <div class="modal-footer">
    <input class="modal-btn" type="button" value="Select" />
  </div>
</div>

uj5u.com熱心網友回復：

您可以使用forEach()andArray.from來完成這項作業。對于顯示的每個按鈕，當任何按鈕被單擊 3 次時禁用每個按鈕。將變數增加SelectCount三倍給出信號。

var container = document.getElementById('my_dataviz');
var array = ["One", "Two", "Three", "Four", "Five", "Six",
  "Seven", "Eight", "Nine", "Ten"
]
let identifier = 0;

array.forEach(element => {
  var button = document.createElement("button");
  button.setAttribute("class", "btn")
  button.classList.add("btn")
  button.id = element;
  button.value = element;
  button.type = "button";
  button.setAttribute("onclick", "check();");
  
  var text = document.createTextNode(element);
  button.appendChild(text);
  container.appendChild(button);
});

let btn = document.getElementsByClassName("btn")

for (var i = 0; i < btn.length; i  ) {
  (function(index) {
    btn[index].addEventListener("click", function() {
      console.log("Clicked Button: "   index);

      let isPresent = false;

      this.classList.forEach(function(e, i) {
        if (e == "button-focus") {
          isPresent = true;
        } else {
          isPresent = false;
        }
      });

      if (isPresent) {
        this.classList.remove("button-focus");
      } else {
        this.classList.add("button-focus");
      }
    });
  })(i);
}

var SelectCount=0;


function check() {
    
SelectCount  = 1
if (SelectCount > 2) {
        Array.from(document.querySelectorAll(".btn")).forEach(function(btn) {
            
            console.log("disabled "   btn.value)
            btn.setAttribute("disabled", true)

        })


}}

:root {
  --primary_orange: #fea501
}

;
.my_dataviz {
  width: auto;
  height: 500px;
  margin-top: 15px;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-around;
}

.my_dataviz button {
  font-size: 16px;
  display: flex;
  justify-content: center;
  width: 120px;
  background-color: Transparent;
  -webkit-tap-highlight-color: transparent;
  background-repeat: no-repeat;
  border: none;
  letter-spacing: 1.6px;
  margin: 10px;
  border: 1px solid transparent;
}

.my_dataviz button:hover {
  box-sizing: border-box;
  background-color: var(--primary_orange);
  font-weight: bold;
  border: 1px solid #000;
  border-radius: 10px;
}

.btn.button-focus {
  background-color: var(--primary_orange);
  color: var(--dark);
  font-weight: bold;
  border: 1px solid #000;
  border-radius: 10px;
}

.modal-footer .modal-btn {
  width: 80px;
  height: 25px;
  border-radius: 5px;
  align-items: center;
  Margin: 30px;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div class="modal-style">
  <div class="my_dataviz" id="my_dataviz">

  </div>
  <div class="modal-footer">
    <input class="modal-btn" type="button" value="Select" />
  </div>
</div>

    </body>
</html>

希望這有幫助。

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/489201.html

標籤：javascript html css

上一篇：React中的渲染問題

下一篇：檢測2個div與JavaScript的沖突