jquery - 将图像宽度增加 50px

Question

我有一个多次出现的图像，但我需要图像宽度每次出现时增加 50px。

我试图用jQuery来完成这个，但我现在没有运气，有什么想法会出错吗？

循环获取每一位内容的 HTML 是：

<div class="hideme">
    <h3 class="text-white"><?php the_sub_field('whatcanwedo_stats_number'); ?></h3>
    <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/tash5.png" alt="tash5" class="what-can-we-do-tash" />
    <p><?php the_sub_field('whatcanwedo_stats_content'); ?></p>
</div>

我拥有的 jQuery 是：

var w = 50;
var newWidth;
// what can we do tash
$('.what-can-we-do-tash').each(function(){
    newWidth === w;
    $(this).attr('width',newWidth);
    w+50;
});

然而，这似乎没有做任何事情:(

Answer 1

你应该使用.css()：

$('.what-can-we-do-tash').css('width', function(i){
    return $(this).width() + (i * 50);
});

它在这里工作：http: //jsfiddle.net/wDpvV/1/

Answer 2

试试喜欢

$('.what-can-we-do-tash img').each(function(){
    newWidth === w;
    $(this).css('width',newWidth+50);
    w+50;
});

或尝试喜欢

$('.what-can-we-do-tash').each(function(){
    newWidth === w;
    $(this).css('width',newWidth+50);  //Or directly $(this).width(newWidth+50);
    w+50;        
});

Answer 3

回调的第二个参数是旧的宽度。所以这有效：

$('.what-can-we-do-tash').width(function(i,width){
    return width + i * 50
});