如何避免过滤器选择器JS函数的内联onclick属性答案

【问题标题】：How to avoid inline onclick attribute for filter selector JS function如何避免过滤器选择器JS函数的内联onclick属性
【发布时间】：2021-04-29 02:34:53
【问题描述】：

我试图弄清楚如何避免内联 JS 编辑，因为内容安全标头策略阻止了它。我的项目类似于 W3 学校过滤元素示例。想知道如何在不使用onclick属性的情况下使用JS脚本。

万维网。 w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_elements

filter.html

<!DOCTYPE html>
<html>
<head>
   <title> test</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="filter.css"/>
</head>
<body>

<h2>Filter DIV Elements</h2>

<div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')"> Show all</button>
  <button class="btn" onclick="filterSelection('cars')"> Cars</button>
  <button class="btn" onclick="filterSelection('animals')"> Animals</button>
  <button class="btn" onclick="filterSelection('fruits')"> Fruits</button>
  <button class="btn" onclick="filterSelection('colors')"> Colors</button>
</div>

<div class="container">
  <div class="column cars">BMW</div>
  <div class="column colors fruits">Orange</div>
  <div class="column cars">Volvo</div>
  <div class="column colors">Red</div>
  <div class="column cars animals">Mustang</div>
  <div class="column colors">Blue</div>
  <div class="column animals">Cat</div>
  <div class="column animals">Dog</div>
  <div class="column fruits">Melon</div>
  <div class="column fruits animals">Kiwi</div>
  <div class="column fruits">Banana</div>
  <div class="column fruits">Lemon</div>
  <div class="column animals">Cow</div>
</div>
<script src="filter_js.js"></script>
</body>
</html>

filter.css

.column {
  float: left;
  background-color: #2196F3;
  color: #ffffff;
  width: 100px;
  line-height: 100px;
  text-align: center;
  margin: 2px;
  display: none;
}

.show {
  display: block;
}

.container {
  margin-top: 20px;
  overflow: hidden;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}

filter_js.js

filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}


// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

【问题讨论】：

Please do not use or link to w3schools
嗨 Jennifer，欢迎来到堆栈溢出，在我看来这很难，但你可以使用类似 document.getElementById('some_id').removeAttribute("onclick"); 的元素覆盖 dom，但它太 hacky，你可能会有一些意想不到的行为.
谢谢！我只是决定改用搜索栏功能。类似这个stackoverflow.com/questions/49470147/…

标签： javascript jquery

【解决方案1】：

不完美，但它有效。函数 filterSelection() 只是处理“列”元素的隐藏/显示。

在 btnContainer 的事件监听器中，我可以通过按钮的名称获取类型。

var filterSelection = type => {
  var current = document.querySelectorAll('.show');
  current.forEach(elm => elm.classList.remove('show'));
  if (type === 'all') type = 'column';
  var elmToShow = document.querySelectorAll(`.${type}`);
  elmToShow.forEach(elm => elm.classList.add('show'));
};


document.addEventListener('DOMContentLoaded', e => {
  var btnContainer = document.getElementById("myBtnContainer");
  var buttons = document.querySelectorAll('.btn');
  
  btnContainer.addEventListener('click', e => {
    if (e.target.nodeName == 'BUTTON') {
      buttons.forEach(elm => {elm.classList.remove('active')});
      e.target.classList.add('active');
      var type = e.target.name;
      filterSelection(type);
    }
  });

  filterSelection("all")
});

.column {
  float: left;
  background-color: #2196F3;
  color: #ffffff;
  width: 100px;
  line-height: 100px;
  text-align: center;
  margin: 2px;
  display: none;
}

.show {
  display: block;
}

.container {
  margin-top: 20px;
  overflow: hidden;
}


/* Style the buttons */

.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}

<!DOCTYPE html>
<html>

<head>
  <title> test</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="filter.css" />
  <script src="filter_js.js"></script>
</head>

<body>

  <h2>Filter DIV Elements</h2>

  <div id="myBtnContainer">
    <button class="btn active" name="all"> Show all</button>
    <button class="btn" name="cars"> Cars</button>
    <button class="btn" name="animals"> Animals</button>
    <button class="btn" name="fruits"> Fruits</button>
    <button class="btn" name="colors"> Colors</button>
  </div>

  <div class="container">
    <div class="column cars">BMW</div>
    <div class="column colors fruits">Orange</div>
    <div class="column cars">Volvo</div>
    <div class="column colors">Red</div>
    <div class="column cars animals">Mustang</div>
    <div class="column colors">Blue</div>
    <div class="column animals">Cat</div>
    <div class="column animals">Dog</div>
    <div class="column fruits">Melon</div>
    <div class="column fruits animals">Kiwi</div>
    <div class="column fruits">Banana</div>
    <div class="column fruits">Lemon</div>
    <div class="column animals">Cow</div>
  </div>
</body>

</html>

【讨论】：

【解决方案2】：

<!DOCTYPE html>

测试 -->

<style>
    .column {
        float: left;
        background-color: #2196F3;
        color: #ffffff;
        width: 100px;
        line-height: 100px;
        text-align: center;
        margin: 2px;
        /* display: none; */
    }
    
    .filters {
        display: none;
    }
    
    .show {
        display: block;
    }
    
    .container {
        margin-top: 20px;
        overflow: hidden;
    }
    /* Style the buttons */
    
    .btn {
        border: none;
        outline: none;
        padding: 12px 16px;
        background-color: #f1f1f1;
        cursor: pointer;
    }
    
    .btn:hover {
        background-color: #ddd;
    }
    
    .btn.active {
        background-color: #2196F3;
        color: white;
    }
</style>

<h2>Filter DIV Elements</h2>

<div class="filterSection">
    <div id="myBtnContainer">
        <button class="btn active" data-id="all"> Show all</button>
        <button class="btn" data-id="cars"> Cars</button>
        <button class="btn" data-id="animals"> Animals</button>
        <button class="btn" data-id="fruits"> Fruits</button>
        <button class="btn" data-id="colors"> Colors</button>
    </div>
    <div class="container">
        <div class="filters show" id="cars">
            <div class="column">BMW</div>
            <div class="column">Volvo</div>
            <div class="column">Mustang</div>
        </div>

        <div class="filters" id="colors">
            <div class="column">Red</div>
            <div class="column">Orange</div>
            <div class="column">blue</div>

        </div>
        <div class="filters" id="animals">
            <div class="column">Mustang</div>
            <div class="column">Cat</div>
            <div class="column">Dog</div>
            <div class="column">Kiwi</div>
            <div class="column animals">Cow</div>
        </div>
        <div class="filters" id="fruits">
            <div class="column">Melon</div>
            <div class="column">Banana</div>
            <div class="column">Lemon</div>
            <div class="column">Kiwi</div>
        </div>
    </div>
</div>





        const section = document.querySelector(".filterSection");
    const btns = document.querySelectorAll(".btn");
    const rows = document.querySelectorAll(".filters");
    rows.forEach(row => {
        row.classList.add('show');
    })
    section.addEventListener("click", function(e) {
        console.log(e.target.dataset.id);
        const id = e.target.dataset.id;
        if (id) {
            btns.forEach((btn) => {
                btn.classList.remove("active");
                e.target.classList.add("active");
            });
            rows.forEach((row) => {
                row.classList.remove("show");
            });
            if (id == 'all') {
                // rows.style.display = 'block';
                rows.forEach(row => {
                    row.classList.add('show');
                })
            } else {
                const element = document.getElementById(id);
                element.classList.add("show");
                console.log(element);
            }


        }
    });

【讨论】：

【解决方案3】：

您可以（并且应该）使用EventTarget.addEventListener 代替内联处理程序。例如：

const btnContainerEl = document.querySelector('#myBtnContainer');
const containerEl = document.querySelector('.container');

btnContainerEl.addEventListener('click', event => {
  if (event.target.tagName === 'BUTTON') {
    Array.from(containerEl.children).forEach(divEl => {
      if (event.target.value === "all" || divEl.classList.contains(event.target.value)) {
        divEl.style.display = "block";
      } else {
        divEl.style.display = "none";
      }
    });
  }
});

<h2>Filter DIV Elements</h2>

<div id="myBtnContainer">
  <button class="btn active" value="all"> Show all</button>
  <button class="btn" value="cars"> Cars</button>
  <button class="btn" value="animals"> Animals</button>
  <button class="btn" value="fruits"> Fruits</button>
  <button class="btn" value="colors"> Colors</button>
</div>

<div class="container">
  <div class="column cars">BMW</div>
  <div class="column colors fruits">Orange</div>
  <div class="column cars">Volvo</div>
  <div class="column colors">Red</div>
  <div class="column cars animals">Mustang</div>
  <div class="column colors">Blue</div>
  <div class="column animals">Cat</div>
  <div class="column animals">Dog</div>
  <div class="column fruits">Melon</div>
  <div class="column fruits animals">Kiwi</div>
  <div class="column fruits">Banana</div>
  <div class="column fruits">Lemon</div>
  <div class="column animals">Cow</div>
</div>

另外，我想指出event-delegation technique 的使用（即，将事件侦听器放在父元素上，而不是每个单独的按钮上），它比许多侦听器更有效。

【讨论】：