要从String数组应用多个CSS规则吗？

Question

我目前为我的jQuery请求设置了以下内容，这是为了在页面上找到ID为“ myid”的元素，并对其应用新的CSS规则。这些规则是事先未知的，因此我首先读取一个文件并将结果存储在字符串数组中，其中偶数索引为规则，奇数索引为值。但是，jQuery拒绝这项工作。我在文档上拖了无济于事，而我所得到的只是，显然word [0]的类型为string []，而不是string类型（不应该这样）。

我可以对此提出一些建议吗？这是我的意思的示例：

var words = ["color", "blue", "font-size", "100"]; // these have been parsed from a file and formatted

$("#myid").css({words[0] : words [1], words[2], words[3]}); // This won't apply

Answer 1

我认为此代码将为您提供帮助。我仅在此页面上进行了测试。 ：）

var words = ["color", "blue", "font-size", "100"];

for (var i = 0; i < words.length; i += 2){
  $("#mainbar").css(words[i], words[i+1]);
}

此循环将帮助您添加任意数量的规则，因为您正在动态读取它们。

Answer 2

一种方法是首先构建css对象，并将其传递给jQuery函数：

let words = ["color", "blue", "font-size", "100"]; // these have been parsed from a file and formatted

const cssObj = {};
words.forEach((el,idx,arr) => {
   if(!(idx % 2) && (idx + 2 <= arr.length) ){
     cssObj[el] = arr[idx + 1] 
   }
});

$("#myid").css(cssObj); // This won't apply

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myid">MyId Div</div>

Answer 3

这里是一种将CSS组合为一个对象以一次全部应用的方法：

const words = ["color", "blue", "font-size", "100px"];


let cssObj = {};

for (var i = 0; i < words.length; i++){
    cssObj = { ...cssObj, [words[i]]: words[i+1] }
}

$("#mainbar").css(cssObj);

JSFIDDLE

Answer 4

虽然您已经接受了答案，但我想我会提供一种替代方法，并附有说明，以便您以及将来的访问者可以了解如何解决方案的工作方式：

// your original, parsed Array:
let words = ["color", "blue", "font-size", "100px"],

// we convert your array of words into a two-dimensional Array
// word-pairs, using Array.prototype.reduce():
// (Please note this approach was taken from user
// Vbyec's answer: https://stackoverflow.com/a/44996257/82548)
  pairs = words.reduce(function(result, value, index, array) {

    // if the index modulo 2 (the remainder of the index divided by 2)
    // is equal to 0:
    if (index % 2 === 0)

      // we push the sliced Array elements - taken from the copy
      // of the Array - into the result Array (the empty Array
      // passed as an argument):
      result.push(
        // here we define the start of the slice as the index
        // of the current Array-element and the end of the
        // slice before the element found at the index of
        // index of the current Array-element + 2:
        array.slice(index, index + 2)
      );
    // we then return the result:
    return result;
  }, []),
// we use Object.fromEntries() to create a new Object from
// the two-dimensional Array we created:
  cssObj = Object.fromEntries(pairs);

// we pass the created-Object to jQuery's css() method:
$('#myid').css(cssObj);

let words = ["color", "blue", "font-size", "100px"], // these have been parsed from a file and formatted
  pairs = words.reduce(function(result, value, index, array) {
    if (index % 2 === 0) {
      result.push(array.slice(index, index + 2));
    }
    return result;
  }, []),
  cssObj = Object.fromEntries(pairs);

$('#myid').css(cssObj);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="myid">Some arbitrary text</div>

JS Fiddle demo。

参考：

• JavaScript：
  • Array.prototype.push()。
  • Array.prototype.push()。
  • Array.prototype.reduce()。
  • Array.prototype.reduce()。
• jQuery：
  • Array.prototype.slice()。

参考书目：

• “ Array.prototype.slice()”