增加圖像寬度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 
});