Change one element for each click with jquery

Question

I have a box , like this :

<div class="box">
</div>

And i want to do something with jquery that changes the text of that element for each time that the .box get clicked !

For example,

for first time , i click on the box, i want to have : <div class="box">Test1</div>

For second time , i click on that , i want this : <div class="box">Test2</div>

+...

I khow i can use this code for click event :

$('.box').click(function(){
 $(this).text();
});

But i want something to do , to have multiple values for each click !

EDit : I don't need a value + count ! i need new string each time

BurakBaskak · Accepted Answer · 2014-05-23 19:57:24Z

1

You can use that code:

var myTexts = ["text1", "text2", "text3"];

$('div.box').click(function (indexOfArray) {
    $(this).text(myTexts[indexOfArray]);
})

answered May 23, 2014 at 19:57

BurakBaskak

464 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Farzad Over a year ago

Thanks, but not worked for me.. can u add JSFIDDLE ?

antpaw · Accepted Answer · 2014-05-23 19:46:04Z

1

try to store your click count in a variable.

   var i = 0;
   $('.box').click(function(){
     i++;
     $(this).text('Test'+i);
   });

answered May 23, 2014 at 19:46

antpaw

16.1k11 gold badges63 silver badges94 bronze badges

Comments

j08691 · Accepted Answer · 2014-05-23 19:46:49Z

1

var clix = 1;
$('div.box').click(function () {
    $(this).text('Test' + clix++);
})

jsFiddle example

answered May 23, 2014 at 19:46

j08691

209k33 gold badges269 silver badges281 bronze badges

4 Comments

Farzad Over a year ago

thanks, i don't need test + count ! How can i have a new string with new click ?

j08691 Over a year ago

What kind of new string?

Farzad Over a year ago

first one can be test and for new click : message and for third time : Hello!

j08691 Over a year ago

Then you need to specify what these news strings are. Your question isn't clear. Like this jsfiddle.net/j08691/fujaN?

Mario J Vargas · Accepted Answer · 2014-05-23 19:48:22Z

1

This is one way to do it. See this fiddle

$('.box').click(function(){
    var $this = $(this),
        count = $this.data("count") || 0;

    count += 1;
    $this.text("Test" + count.toString());

    $this.data("count", count);
});

answered May 23, 2014 at 19:48

Mario J Vargas

1,1957 silver badges12 bronze badges

4 Comments

Farzad Over a year ago

thanks, i don't need test + count ! How can i have a new string with new click ?

Mario J Vargas Over a year ago

I'm not sure what you're getting at. Would you mind specifying? Your original post said to put "Test1", "Test2", and so on.

Farzad Over a year ago

No, the secound one can be Messaeg , the third one can be Hello! and so on . there is no increasing in number, just new strings

Mario J Vargas Over a year ago

You will need to store those guys in an array and then reference them in the counter. You can update your post to indicate that.

Collectives™ on Stack Overflow

Change one element for each click with jquery

4 Answers 4

1 Comment

Comments

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related