循环使用CSS规则遍历数组，并将它们应用于元素

Looping through an array with CSS rules, and applying them to element

本文关键字：元素 应用于 数组 CSS 规则 遍历 循环      更新时间：2024-02-08

我希望用户能够输入CSS输入，并将该CSS应用于最后一个选择的元素（由"rangeselector"变量选择）。代码选择了正确的元素，但只应用了第一个CSS规则。

例如："背景：蓝色；颜色：红色；"仅适用于背景。

函数正确地在数组中运行。

function customCss(){
  css = $("input.css").val();
  if(css.length < 10){
        alert("Insert valid CSS");
  }else{
        cssArray = css.split(";");
        counter = 0;
        cssArray.forEach(function(){
              var ruleSplit = cssArray[counter].split(":");
              target = $("[content_child=" + rangeselector + "]");
              target.css(ruleSplit[0] , ruleSplit[1]);
              counter = counter + 1;
        });
  }
}

如果你知道这个问题，或者有更好的方法来实现同样的目标，我很乐意听取你的建议。

感谢

通过使用Array.forEach（），您已经拥有了对Array的索引和引用。你不需要使用计数器

    cssArray = css.split(";");
    // counter = 0;
    cssArray.forEach(function(obj, key, array){
          var ruleSplit = obj.split(":");
          target = $("[content_child=" + rangeselector + "]");
          target.css(ruleSplit[0] , ruleSplit[1]);
          // counter = counter + 1;
    });

在设置元素之前，您是否尝试过剥离这些元素？可能发生的情况是，它试图设置类似"颜色"的东西，而不是"颜色"

function customCss(){
  css = $("input.css").val();
  if(css.length < 10){
        alert("Insert valid CSS");
  }else{
        cssArray = css.split(";");
        counter = 0;
        cssArray.forEach(function(){
              var ruleSplit = cssArray[counter].split(":");
              target = $("[content_child=" + rangeselector + "]");
              target.css(ruleSplit[0].trim() , ruleSplit[1].trim());
              counter = counter + 1;
        });
  }
}
相关文章：