Fatal编程技术网
  • javascript/
  • Javascript 如何避免过滤器选择器JS函数的内联onclick属性

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

javascript jquery

Javascript 如何避免过滤器选择器JS函数的内联onclick属性,javascript,jquery,Javascript,Jquery,我试图找出如何避免内联JS编辑，因为内容安全头策略阻止了它。我的项目类似于W3学校过滤器元素示例。想知道如何在不使用onclick属性的情况下使用JS脚本 www.w3schools.com/howto/tryit.asp？filename=tryhow\u js\u filter\u elements filter.html <!DOCTYPE html> <html> <head> <title> test</title>

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

www.w3schools.com/howto/tryit.asp？filename=tryhow\u js\u filter\u 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_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";
  });
}

过滤器选择（“全部”）
函数过滤器选择（c）{
变量x，i；
x=document.getElementsByClassName（“列”）；
如果（c==“全部”）c=“”；
对于（i=0；i-1）w3AddClass（x[i]，“show”）；
}
}
函数w3AddClass（元素、名称）{
变量i，arr1，arr2；
arr1=element.className.split（“”）；
arr2=name.split（“”）；
对于（i=0；i-1）{
arr1.拼接（arr1.indexOf（arr2[i]），1）；
}
}
element.className=arr1.join（“”）；
}
//将活动类添加到当前按钮（高亮显示）
var btnContainer=document.getElementById（“myBtnContainer”）；
var btns=btnContainer.getElementsByClassName（“btn”）；
对于（变量i=0；i
不是完美的，但它可以工作。函数filterSelection（）只处理“column”元素的隐藏/显示

在btnContainer的eventlistener中，我可以通过按钮的名称获取类型

var filterSelection=type=>{
var current=document.querySelectorAll（'.show'）；
current.forEach（elm=>elm.classList.remove（'show'）；
如果（类型=='all'）类型='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.queryselectoral（'.btn'）；
btnContainer.addEventListener（'click'，e=>{
如果（e.target.nodeName=='BUTTON'）{
forEach（elm=>{elm.classList.remove（'active'）}）；
e、 target.classList.add（'active'）；
var type=e.target.name；
过滤器选择（类型）；
}
});
过滤器选择（“全部”）
});

.column{
浮动：左；
背景色：#2196F3；
颜色：#ffffff；
宽度：100px；
线高：100px；
文本对齐：居中；
保证金：2倍；
显示：无；
}
.表演{
显示：块；
}
.集装箱{
边缘顶部：20px；
溢出：隐藏；
}
/*设计按钮的样式*/
.btn{
边界：无；
大纲：无；
填充：12px 16px；
背景色：#f1f1；
光标：指针；
}
.btn:悬停{
背景色：#ddd；
}
.btn.active{
背景色：#666；
颜色：白色；
}



测试
过滤元件
全部展示
汽车
动物
水果
颜色
宝马
橙色
沃尔沃汽车
红色
野马
蓝色
猫
狗
甜瓜
几维鸟
香蕉
柠檬
母牛




测试
-->

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




.栏目{
浮动：左；
背景色：#2196F3；
颜色：#ffffff；
宽度：100px；
线高：100px；
文本对齐：居中；
保证金：2倍；
/*显示：无*/
}
.过滤器{
显示：无；
}
.表演{
显示：块；
}
.集装箱{
边缘顶部：20px；
溢出：隐藏；
}
/*设计按钮的样式*/
.btn{
边界：无；
大纲：无；
填充：12px 16px；
背景色：#f1f1；
光标：指针；
}
.btn:悬停{
背景色：#ddd；
}
.btn.active{
背景色：#2196F3；
颜色：白色；
}



过滤器DIV元素
全部展示
汽车
动物
水果
颜色
宝马
沃尔沃汽车
野马
红色
橙色
蓝色
野马
猫
狗
几维鸟
母牛
甜瓜
香蕉
柠檬
几维鸟
const section=document.querySelector（“.filterssection”）；
const btns=document.queryselectoral（“.btn”）；
const rows=document.queryselectoral（“.filters”）；
rows.forEach（row=>{
row.classList.add（'show'）；
})
第节。添加事件列表器（“单击”，函数（e）{
console.log（e.target.dataset.id）；
const id=e.target.dataset.id；
如果（id）{
btn.forEach（（btn）=>{
btn.classList.remove（“活动”）；
e、 target.classList.add（“活动”）；
});
rows.forEach（（row）=>{
行。类列表。删除（“显示”）；
});
如果（id=='all'）{
//rows.style.display='block'；
rows.forEach（row=>{
row.classList.add（'show'）；
})
}否则{
常量元素=document.getElementById（id）；
元素。类列表。添加（“显示”）；
控制台日志（元素）；
}
}
});

您可以（也应该）使用而不是内联处理程序。例如：



const btncontainer=document.querySelector（“#myBtnContainer”）；
const containerell=document.querySelector（'.container'）；
btnContaineerl.addEventListener（'click'，ev

<!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);
            }


        }
    });