在尝试对元素 css 设置使用 jQuery 时，我的错误在哪里？

Question

我正在寻找一种更好、更清晰的方法来为一组元素设置 css 值。

所以在 jQuery 中这样做：

$content.css( {
            scale: rescale
        } );
$left_mask
        .css( {
            x: -460,
            opacity: 0,
            scale: bgsy
        } );
$im     .css( {
            x: '-15%'
        } );
$right_mask
        .css( {
            x: 460,
            opacity: 0,
            scale: bgsy
        } );

我想实现类似于：

matrixCss = {
    $content:       { scale: rescale },
    $left_mask:     { x: -460, opacity: 0, scale: bgsy },
    $im:            { x: '-15%' },
    $right_mask:    { x: 460, opacity: 0, scale: bgsy }
};
// set base states
$.each( matrixCss, function( $el, baseStates ) {
    $el.css( baseStates );
} );

我做错了什么？
有没有更好更短的方法来实现这个目标？我喜欢在很多地方使用我的 matrixCss 字段，有时也使用 animate。

Answer 1

$content, ... 是属性名称，不引用名称为 $content, ...

的变量

您需要执行以下操作：

matrixCss = [
   { obj: $content, css: { scale: rescale }},
];

(如果rescale不是变量那么你需要把它写在引号里'rescale')

matrixCss.forEach(function(item) {
   item.obj.css(item.css);
});

或使用 ES6：

matrixCss.forEach( item => item.obj.css(item.css) );

Answer 2

你可以这样做：

https://jsfiddle.net/hdbuzLm2/

在jQuery.each方法中，传递的第一个参数（'$el'）是对象的每个键。因此，对于您的示例，第一次迭代将是字符串“$content”。

为了使jQuery css 方法起作用，您需要首先创建一个jQuery 对象。所以如果你的元素的 id 是'$content'，你需要创建

$('#$content').css( baseStates );

但是，jQuery不喜欢id开头的'$'。因此，您需要更改您的 ID，使其不以它开头。所以如果你改变你的 matrixCss 那么键是

matrixCss = {
    content:       { scale: 'rescale' },
    left_mask:     { x: -460, opacity: 0, scale: 'bgsy' },
    im:            { x: '-15%' },
    right_mask:    { x: 460, opacity: 0, scale: 'bgsy' }
};

那么 $.each 循环应该是这样的：

$.each( matrixCss, function( $el, baseStates ) {
    $('#' + $el).css(baseStates);
} );

顺便说一句，另一种方法可能是创建另一组 css 属性并更改（或添加）元素上的 class 名称。

// css definition
#content .alternate { scale: 'rescale' }
#left_mask .alternate {x: -460, opacity: 0, scale: 'bgsy'}

// js - add 'alternate' class to elements
$('#content, #left_mask').addClass('alternate');

在尝试对元素 css 设置使用 jQuery 时，我的错误在哪里？

Where is my error in this attempt to use jQuery each for elements css setting?

css

each

jquery

field