[英]Change color of all elements in class on click JavaScript
我有一个人体图像（SVG）。 我想使用JavaScript，这样，当我单击特定区域（例如，小腿）时，所有具有“小腿”类（即使未单击）的元素的颜色也都发生了变化–对用户来说更容易。
这是我目前拥有的JavaScript：
function changeclassstyle() {
var c = document.getElementsByClassName("lower-leg");
for (var i=0; i<c.length; i++) {
c[i].style.fill = "red";
}
}
此代码的问题在于，仅将其概括为“小腿”。 我可能有十几个我想为此工作的类，并且认为编写12个函数的效率不高，唯一的变化就是类名。 有没有一种方法可以抓住选择的类，然后将其输入到函数中？
-
另外，我很想弄清楚一旦选择了身体的这一部分，我可以如何存储类名。 最后，我想将选择内容以及其他输入的信息存储在数据库中。 但是，除非有人可以提供帮助，否则这可能是一个未来的问题！
这是我的操作方法（已在div上进行了测试）。
我们正在做的是将event对象传递给事件处理程序（您的changeclassstyle()函数）。 然后，它使用被单击项的类（事件目标的类），并使用相同的类名更改该页面上的所有其他内容，以使用所需的新CSS样式。
function changeclassstyle(e) {
// Get all items that have the same class as the item that was clicked
var limbs = document.getElementsByClassName(e.target.className); // for div's and the like
// var limbs = document.getElementsByClassName(e.target.className.baseVal); // turns out this is needed for SVG items
// "limbs" is an HTMLCollection, not an array, so functions like .foreach won't work; C-style for-loops or modern for/let/of loops are better
for (let item of limbs) {
item.style.backgroundColor = 'red';
// item.style.fill = 'red'; // This is probably what you need for your SVG items
}
// You could still use your C-style for loop if needed/wanted
/*
for (var i=0; i<limbs.length; i++) {
limbs[i].style.fill = "red";
}
*/
}
onchange调用看起来像这样（以我的div为例）：
<div class="upper-arm" onclick="changeclassstyle(event)">
</div>
<div class="lower-leg" onclick="changeclassstyle(event)">
</div>
带有简单div的整个示例。
<html>
<head><title>stuff</title></head>
<body>
<script type="text/javascript">
function changeclassstyle(e) {
// For debugging. You may want to expand 'e' here in your browser's debug tools if you're not seeing the values you need/want
console.log(e)
var limbs = document.getElementsByClassName(e.target.className.baseVal);
for (let item of limbs) {
item.style.backgroundColor = 'red';
}
}
</script>
<style type="text/css">
div {
height: 100px;
width: 100px;
background-color: 'white';
border: 1px solid black;
}
</style>
<div class="upper-arm" onclick="changeclassstyle(event)">
</div>
<div class="upper-arm" onclick="changeclassstyle(event)">
</div>
<div class="upper-arm" onclick="changeclassstyle(event)">
</div>
<div class="lower-leg" onclick="changeclassstyle(event)">
</div>
<div class="lower-leg" onclick="changeclassstyle(event)">
</div>
<div class="lower-leg" onclick="changeclassstyle(event)">
</div>
</body>
</html>
您可以在传递class和color函数中使用参数，如下所示
function changeStyle(cls,clr) {
let elems = document.getElementsByClassName(cls);
if(!elems) return;
for (let elem of elems) {
elem.style.color = clr;
}
}
按照我说过的许多类的迭代，您可以将类存储在数组中并对其进行迭代。
let classes = ['one','two','three','four'];
classes.forEach(function (cls) {
changeStyle(cls,"red");
});
如果您想测试/实验，可以在这里玩小提琴： https : //jsfiddle.net/thrL5uqw/8/
注意：根据需要更改样式属性，目前我已将颜色用于演示
我参加聚会有点晚了，但这是我对这个问题的看法。
就像其他人告诉您的那样，您需要在函数中使用一个附加参数来指定要修改元素的类（或尝试从单击的元素中找出该类），因此您应该具有以下内容：
/**
* This function will handle the click event on one of the part of the SVG.
* @param {string} lClass This the class of the element to modify
*/
function handleClick(lClass) {
for (let e of document.getElementsByClassName(lClass)) {
// Here you can do all the changes you need on the SVG element.
e.style.fill = "red";
}
}
在事件绑定方面，您可以像其他建议的那样做，并在HTML元素上添加onclick事件绑定属性，也可以使用addEventListener函数将其绑定到JS中（这样就不必重复每个SVG元素的onclick属性）。
// For each element of all the listed class, bind the "click" event to the handleClick function
const listenClass = [/*List of your classes*/];
for (let l of listenClass) {
for (let e of document.getElementsByClassName(l)) {
e.addEventListener('click', handleClick.bind(this, l));
}
}
演示： https ： //plnkr.co/edit/gay2yBaVi5QD868fsTa6？p = preview
希望对您有所帮助。
如何通过javascript更改类的所有元素的字体颜色？
[英]How to change font color of all elements of a class through javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.