单击JavaScript更改类中所有元素的颜色_Javascript_Html_Css

单击JavaScript更改类中所有元素的颜色

javascript html css

单击JavaScript更改类中所有元素的颜色,javascript,html,css,Javascript,Html,Css,我有一个人体图像（SVG）。我想使用JavaScript，这样当我单击一个特定区域（比如，小腿）时，所有具有“lower leg”类的元素（即使没有单击）都会改变颜色——这对用户来说更容易以下是我目前拥有的JavaScript： function changeclassstyle() { var c = document.getElementsByClassName("lower-leg"); for (var i=0; i<c.length; i++) { c[i].s

我有一个人体图像（SVG）。我想使用JavaScript，这样当我单击一个特定区域（比如，小腿）时，所有具有“lower leg”类的元素（即使没有单击）都会改变颜色——这对用户来说更容易

以下是我目前拥有的JavaScript：

function changeclassstyle() {
  var c = document.getElementsByClassName("lower-leg");
  for (var i=0; i<c.length; i++) {
    c[i].style.fill = "red";
  }
}

函数changeclassstyle（）{
var c=document.getElementsByClassName（“小腿”）；
对于（var i=0；i以下是我将如何做的（在几个div
上测试）
我们正在做的是将事件
对象传递给事件处理程序（您的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";
               }
            */
        }

整个示例使用简单的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>


东西
函数changeclassstyle（e）{
//用于调试。如果没有看到所需/所需的值，您可能希望在浏览器的调试工具中在此展开“e”
控制台日志（e）
var=document.getElementsByClassName（e.target.className.baseVal）；
用于（让肢体项目）{
item.style.backgroundColor='红色'；
}
}
div{
高度：100px；
宽度：100px；
背景色：“白色”；
边框：1px纯黑；
}
您可以在传递类和颜色的函数中使用参数，如下所示
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");
  });

如果您想测试/试验，可以在此处玩小提琴：
注意：如您所愿更改style属性，目前我已在演示中使用了颜色，我来晚了一点，但以下是我对这个问题的看法
正如其他人告诉您的那样，您需要在函数中使用一个附加参数来指定要修改元素的类（或尝试从单击的元素中找出类），因此您应该有如下内容：
/**
*此函数将处理SVG某个部分上的单击事件。
*@param{string}lClass此类是要修改的元素的类
*/
函数handleClick（lClass）{
for（让e为document.getElementsByClassName（lClass））{
//在这里，您可以对SVG元素进行所需的所有更改。
e、 style.fill=“红色”；
}
}

当涉及到事件绑定时，您可以像另一个建议的那样，在HTML元素上添加onclick
事件绑定属性，或者使用addEventListener
函数在JS中绑定它（这样您就不必在每个SVG元素上重复onclick
属性）
//对于列出的所有类的每个元素，将“click”事件绑定到handleClick函数
const listenClass=[/*类列表*/]；
for（让l列为类）{
for（让e为document.getElementsByClassName（l））{
e、 addEventListener（'click'，handleClick.bind（this，l））；
}
}

演示：
我希望这会有所帮助。只需在函数中添加两个参数。类和颜色并在函数中使用，或者您可以简单地存储类is数组并遍历每个参数class@Manjunath谢谢！您是否介意向我展示您的解决方案作为一个答案…JavaScript新手，希望确保我的逻辑正确我添加了答案。请检查谢谢我试图在单击时执行此操作，因此我在html中添加了onclick=“function\u name（）”。如何指定参数？onclick=“function\u name（'lowerleg'，'red'）”我输出到控制台frameds.length，结果是0。你知道为什么吗？至少应该是1，因为它来自于对类的单击。注销e和e.target以查看是否在SVG项上设置了类名。可能需要一些修改才能弄清楚如何从单击的项中获取类。我个人没有处理SVG对象（还没有）。只需更改为e.target.className.baseVal就可以了。谢谢
  let classes = ['one','two','three','four'];

  classes.forEach(function (cls) {
    changeStyle(cls,"red");
  });