Toggle text in span using JQuery

Question

I would like to toggle the text when the div is clicked but I can't make it work. I can make it change once using this

$(document).ready(function() { 
    $(".select_button").on("click", function() {
        $(this).find('.selected').text('Image Selected');
    });
});

But I'm trying to get it to toggle

This is the HTML

<div class="select_button">
       <label>
            <input type="checkbox" name="include_standard" class="include_standard"
               value="<? echo $row['newest_image']; ?>">
             <span class="selected">Use Image</span>
       </label>
</div>

And this is the JQuery

$(document).ready(function() { 
   $(".select_button").on("click", function() {
      $(this).find('.selected').text(text() == 'Use Image' ? 'Selected': 'Use Image');
    });
});

It doesn't throw any errors or doing anything.

David Thomas · Accepted Answer · 2014-03-14 18:43:38Z

2

I'd suggest:

$(".select_button").on("click", function () {
    $(this).find('.selected').text(function (i, oldText) {
        return $.trim(oldText) == 'Use Image' ? 'Selected' : 'Use Image';
    });
});

JS Fiddle demo.

References:

on().
text().

answered Mar 14, 2014 at 18:43

David Thomas

254k53 gold badges382 silver badges421 bronze badges

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

Comments

Mark · Accepted Answer · 2014-03-14 18:41:03Z

0

<script>
$(document).ready(function(){
  $(".select_button").mousedown(function(){
     $(this).text("Your New Text")
 });
 $(".select_button").mouseup(function(){
     $(this).text("Your Old Text")
 });
});
</script>

answered Mar 14, 2014 at 18:41

Mark

4,8718 gold badges58 silver badges93 bronze badges

2 Comments

tatty27 Over a year ago

As soon as I move the mouse away it changes back, perhaps I should have made the questions clearer, I would like the new value to stay until I click on the button again.

Mark Over a year ago

@tatty27, tr yusing my new answer

Mark · Accepted Answer · 2014-03-14 18:45:28Z

0

<script>
$(document).ready(function(){
  $(".select_button").click(function(){
     $(this).addClass("NewClass");
     $(this).text("Your New Text");
 });
 $(".NewClass").click(function(){
     $(this).removeClass("NewClass");
     $(this).text("Your Old Text");
 });
});
</script>

answered Mar 14, 2014 at 18:45

Mark

4,8718 gold badges58 silver badges93 bronze badges

Comments

evasilevsky · Accepted Answer · 2014-03-14 18:46:40Z

0

Do you have another text() method in scope you can call?

This could mean that it is returning undefined every time causing 'Use Image' to always be returned from your ternary statement.

I would suggest storing your find result for $(this).find('.selected') into a variable and then calling .text() on that variable in order to get the text from the element with the selected element.

answered Mar 14, 2014 at 18:46

evasilevsky

1755 bronze badges

Comments

Arjit · Accepted Answer · 2014-03-14 18:51:46Z

0

Try this.

$(document).ready(function() { 
   $(".select_button").on("click", function() {

   var spanvar = $(this).find('.selected');
   $(spanvar).text(spanvar.text() == 'Use Image' ? 'Selected': 'Use Image');
   });
});

answered Mar 14, 2014 at 18:51

Arjit

3,4961 gold badge20 silver badges18 bronze badges

Collectives™ on Stack Overflow

Toggle text in span using JQuery

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related