Question

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

前：＆＃34;背景：蓝色;颜色：红;＆＃34;仅适用背景。

该函数正确运行数组。

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

Answer 2

您是否尝试在设置之前剥离元素？可能发生的事情是，它试图设置像＆＃34; color＆＃34;而不是＆＃34;颜色＆＃34;

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

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

2 个答案: