Question

我有一个人体图像（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个函数的效率不高，唯一的变化就是类名。有没有办法抓住选定的类，然后将其输入到函数中？

-

此外，我想弄清楚如何，一旦选择了正文的该部分，就可以存储类名。最后，我想将选择内容以及其他输入的信息存储在数据库中。但是，除非有人可以提供帮助，否则这可能是一个未来的问题！

Answer 1

这就是我的处理方式（已在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>

Answer 2

您可以在传递Excel和class的函数中使用参数，如下所示

color

像我说的许多类的迭代一样，您可以将类存储在数组中并对其进行迭代。

function changeStyle(cls,clr) {
  let elems = document.getElementsByClassName(cls);
  if(!elems) return;
  for (let elem of elems) {
      elem.style.color = clr;
  }
}

如果要测试/实验，可以在这里玩小提琴：https://jsfiddle.net/thrL5uqw/8/

注意：根据需要更改样式属性，目前我已将颜色用于演示

Answer 3

我参加聚会有点晚了，但这是我对这个问题的看法。

就像其他人告诉您的那样，您需要在函数中使用其他参数来指定要修改元素的类（或尝试从单击的元素中找出该类），因此您应该有一些东西像这样：

/**
 * 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更改类中所有元素的颜色

3 个答案: