2

我有 5 个跨度元素和 5 个图像。

    <div id="myDiv">
    <span class="fwheeler"><img src="car1.jpg"/></span>
    <span class="fwheeler"><img src="car1.jpg"/></span>
    <span class="fwheeler"><img src="car1.jpg"/></span>
    <span class="fwheeler"><img src="car1.jpg"/></span>
    <span class="fwheeler"><img src="car1.jpg"/></span>
    </div>

我有一个这样的按钮

<button type="button" id="park1">Park</button>

如果我点击按钮 span:img 的 src 应该改变。为此我正在使用

$("img").attr('src', '\car.jpg');

这是替换所有图像 src。但我的要求是，如果我第一次点击按钮，只有第一个跨度的图像 src 应该改变。如果我点击第二次，第一次和第二次都应该改变等等..

我怎样才能做到这一点。

4

7 回答 7

3

将单击的值计入全局变量.....使用 eq() 更改 src 属性.. 试试这个

var clickCount=0;
$('#park1').click(function(){  
     if(clickcount < $('#myDiv span').length){  //check the length of span if clickCount is greater make it 0.... so that you get the same effect after 6th click
      $("img").eq(clickCount).attr('src', '\car.jpg'); 
      clickCount++;
     }else{
        clickCount=0;
     }
});
于 2013-03-11T06:24:44.373 回答
3

然后放置一个不计算点击次数的全局变量。

然后使用 

 <button type="button" id="park1">Park</button>

    <script>
    var count = 0;
     $('#park1').click(function(){
       if(count< $('#myDiv span').length){        
       $("img").eq(count).attr('src', '\car.jpg'); 
      count++;
     }else{
        count=0;
     }
 });    
</script>
于 2013-03-11T06:23:24.083 回答
2

试试下面的东西。

<script type="text/javascript">
    var clickCounter = 0;
    $(function()
    {
        $('#park1').on('click',function()
        {

            if(clickCounter >= $('#myDiv span').length)
            {
                clickCounter = 0;
            }
            else
            {
                clickCounter++;
            }
            $("img").eq(clickCounter).attr('src', '\car.jpg');
        });

    });
</script>
<div id="myDiv">
    <span class="fwheeler"><img src="car1.jpg"/></span>
    <span class="fwheeler"><img src="car1.jpg"/></span>
    <span class="fwheeler"><img src="car1.jpg"/></span>
    <span class="fwheeler"><img src="car1.jpg"/></span>
    <span class="fwheeler"><img src="car1.jpg"/></span>
</div>

<button type="button" id="park1">Park</button>

我所做的用于.on()允许在动态加载时添加事件DOM。

我声明clickCounter为global变量，因此第二个和第三个等click事件可以使用其先前的值。

并计算是否clickCounter可用DOM 图像equal，greater然后将其设置为 0。

于 2013-03-11T06:26:11.817 回答
1

试试这个：

$('#park1').click(function () {
    $('img[src$="car.jpg"]').first().attr('src', '\car.jpg');
});

检查这个小提琴

于 2013-03-11T06:30:43.997 回答
1

这应该有效：

var clickCount=0;

(function() {

$("park1").click(function() {
$("myDiv").find("img").eq(clickCount).attr('src','/car.jpg');
clickCount++;    
});

});
于 2013-03-11T06:40:36.700 回答
1

CSS 

.NewImage
{
content:url("\car.jpg");
}

代码

   $(span).each(function(){

    if ($(this img).hasClass('NewImage') == false)
       {
         $(this img).addclass('NewImage')
         return false;
       }

    });
于 2013-03-11T06:43:36.567 回答
0

如果您使用 jquery 使用 first();

于 2013-03-11T06:25:38.027 回答