Question

如果我有一组我想要整合的类，如下所示：

.g1 ---＆gt; .g12

我该怎么做？

我有我想做的增量事情，我相信我已经写好了，但我不知道如何将该变量与.grain连接起来，所以我每次点击只能改变一个方格。

$("#grains").click(function(){
var x;
x++;
$(".grain").attr('src',"orangesq-01.png");
});

这是我制作的列表项目：

<ul id="grains">
            <li><img src="blusq-01.png" class="grain" /></li>
            <li><img src="blusq-01.png" class="grain1" /></li>
            <li><img src="blusq-01.png" class="grain2" /></li>
            <li><img src="blusq-01.png" class="grain3" /></li>
            <li><img src="blusq-01.png" class="grain4" /></li>
            <li><img src="blusq-01.png" class="grain5" /></li>
            <li><img src="blusq-01.png" class="grain6" /></li>
            <li><img src="blusq-01.png" class="grain7" /></li>
            <li><img src="blusq-01.png" class="grain8" /></li>
            <li><img src="blusq-01.png" class="grain9" /></li>
            <li><img src="blusq-01.png" class="grain10" /></li>
            <li><img src="blusq-01.png" class="grain11" /></li>
        </ul>

我认为你了解我正在尝试做什么。如果我能弄清楚那个连接的东西，那就太棒了。

Answer 1

您可以添加索引，或只是使用.eq()来电，如果它们已经有序。

var x = 0;
$("#grains").click(function(){
 $(".grain" + (x === 0 ? '' : x)).attr('src',"orangesq-01.png");
 //or
 $(this).find('img').eq(x).attr('src',"orangesq-01.png");
  x++;
});

嘿http://jsfiddle.net/mURxA/

Answer 2

另一种更具动态性的方法是使用自定义选择器和eq(0)来简单地选择第一个图像，如下所示：

$('#grains').click(function()
{
    $('img[src="blusq-01.png"]', this).eq(0).attr('src', 'orangesq-01.png');
});

希望你不介意安德鲁，我更新了你的example。

Jquery图像更改 - 迭代图像

2 个答案: