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

Question

我希望用户能够输入 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;
        });
  }
}

如果您知道问题所在，或者有实现相同目标的更好方法，我很乐意听取您的建议。

谢谢

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