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
});

将图像宽度增加50px

3 个答案: