Question

我用这种方法制作了多个元素

<img class="wind-img" src="..." data-wind="100"/>

我想以此方式设置这些元素的css

$('.wind-img').css({
        "-webkit-transform": "rotate(" + $(this).data('wind') + "deg)",
        "-moz-transform": "rotate(" + $(this).data('wind') + "deg)",
        "transform": "rotate(" + $(this).data('wind') + "deg)" 
    })

但是它不起作用，只是在元素上没有设置任何样式。如果我输入度数，它就可以工作。.

Answer 1

我认为$(this)在.css()调用中无效。但是，您可能可以执行类似的操作，并且（完全不是技术上的）您的版本不会遍历每个元素并应用CSS，但更多地是笼统的声明，因此$(this)可能不会引用您的内容认为确实如此：

$('.wind-img').each(function () {

    var wind = $(this).data('wind');

    $(this).css({
        "-webkit-transform": "rotate(" + wind + "deg)",
        "-moz-transform": "rotate(" + wind + "deg)",
        "transform": "rotate(" + wind + "deg)" 
    });

});

Answer 2

在您的原始代码中，this将引用其他内容，可能是window或document（或某些其他事件处理程序，例如按钮单击事件的按钮）。

如果您使用.each，则可以使用this：

$('.wind-img').each(function() { 
    // "this" is now available as it's inside the .each
    $(this).css({
      "-webkit-transform": "rotate(" + $(this).data('wind') + "deg)",
      "-moz-transform": "rotate(" + $(this).data('wind') + "deg)",
      "transform": "rotate(" + $(this).data('wind') + "deg)" 
})

可以通过重复使用$(this).data('wind')来提高效率：

$('.wind-img').each(function() { 
    // "this" is now available as it's inside the .each
    var windimg = $(this);
    var wind = windimg.data('wind');
    windimg.css({
      "-webkit-transform": "rotate(" + wind + "deg)",
      "-moz-transform": "rotate(" + wind + "deg)",
      "transform": "rotate(" + wind + "deg)" 
})

如果您只有一个.wind-img，则不需要每个：

var windimg = $('.wind-img');
var wind = windimg.data('wind');
windimg.css({
    "-webkit-transform": "rotate(" + wind + "deg)",
    "-moz-transform": "rotate(" + wind + "deg)",
    "transform": "rotate(" + wind + "deg)" 
});

Answer 3

$(document).ready(function(){
  $('.wind-img').each(function(){
    $(this).css({
          "-webkit-transform": "rotate(" + $(this).data('wind') + "deg)",
          "-moz-transform": "rotate(" + $(this).data('wind') + "deg)",
          "transform": "rotate(" + $(this).data('wind') + "deg)" 
      });
  });
});

jQuery-在函数内使用$（this）不起作用

3 个答案: