Question

我有5个span元素和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>

如果我点击按钮，跨度的src：img应该改变。为此，我正在使用

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

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

我该怎么做。

Answer 1

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

然后使用

 <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>

Answer 2

将点击的值计入全局变量.....使用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;
     }
});

Answer 3

尝试以下内容。

<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是equal或greater而不是DOM图片可用，那么它会将其设置为0.

Answer 4

试试这个：

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

CHECKOUT THIS FIDDLE

Answer 5

这应该有效：

var clickCount=0;

(function() {

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

});

Answer 6

CSS

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

<强>代码

   $(span).each(function(){

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

    });

Answer 7

如果你使用jquery使用first（）;

使用jquery在span中更改图像src

7 个答案:

CHECKOUT THIS FIDDLE