2

I have 5 span elements and 5 images in them.

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

and i have one button like this

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

If i click on the button the src of the span:img should change. for this i am using

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

This is replacing all images src. But my requirement is, if i click on the button for the first time, only first span's image src should change. if i click 2nd time, both 1st and 2nd should change and so on..

How can i do this.

2
  • try changing $("img").attr('src', '\car.jpg'); to $("img").attr('src', '/car.jpg'); Mar 11, 2013 at 6:23
  • no problem with that. it is working if i use "\" also Mar 11, 2013 at 6:25

7 Answers 7

3

then put a global variable that counts no of clicks.

then use

 <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>
1
  • Nice, except for the use of inline javascript in the onClick :(
    – Jeemusu
    Mar 11, 2013 at 6:33
3

count the clicked value into global var..... use eq() to change the src attribute.. try this

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

Try something like below.

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

what i did is used .on() that allow to add events on dynamically loaded DOM.

I declared clickCounter as global variable so second and third and etc click event can use its previous value.

And counted if clickCounter is equal or greater than DOM image available then it will set it to 0.

2
  • all answers are correct. which should i mark as correct answer? Mar 11, 2013 at 6:29
  • 3
    @RanadheerReddy its up to you bro...choose anyone if you feel thats the one help you more Mar 11, 2013 at 6:31
1

Try with this one:

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

CHECKOUT THIS FIDDLE

1

CSS

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

Code

   $(span).each(function(){

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

    });
1

This should work:

var clickCount=0;

(function() {

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

});
2
  • 1
    If you placed the clickCount++ at the end of the .click() function you wouldn't need to set the clickCount to -1. It would make more sense to set it to 0?
    – Jeemusu
    Mar 11, 2013 at 6:41
  • Haha yeah I know,thanks for pointing it out.Should I change it?I think I will.
    – Ronophobia
    Mar 11, 2013 at 6:52
0

If your using jquery use first();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.