How to change a specific HTML string with jQuery

Question

Here is my HTML code:

<th>
    Click<br/>
    <img class="magnifier" height="66" src="../Images/magnifier-zoom.png" width="75"><br/>
    To Enlarge
</th>

I have a jQuery script that when clicked it toggles an enlarge class, so when someone clicks to enlarge I want to change the enlarge word to shrink would there be any simple way of doing this in jQuery?

Or do you guys think I am better off having 2 <div>'s or even <span> elements and toggle the display of each element?

having two separate elements, toggling display, would probably be easier to maintain/read, since clicking each performs two different (separate) actions. Similar amount of coding for each approach, it's all preference....Jonathan Sampson's answer is probably what you're talking about tho — A.O.
– A.O., Commented Dec 27, 2013 at 20:26

Sampson · Accepted Answer · 2013-12-27 20:58:31Z

3

There are numerous ways to do this. You could leverage pseudo-element content, do string manipulation with JavaScript, and more. In the end, the best approach is to probably just toggle the visibility of a couple nested elements:

I've placed a default "shrink" class on my td element. Within, I have a couple span elements customized with explicit data-do attributes indicating the purpose of each:

<td class="shrink"> 
    Click to 
    <span data-do="enlarge">Enlarge</span>
    <span data-do="shrink">Shrink</span>
    <img src="..." />
</td>

We target the data-do attributes that are nested within elements that have corresponding classes, and we disable the display of these elements:

.shrink  [data-do='shrink'],
.enlarge [data-do='enlarge'] { 
    display: none;
}

In order to toggle the class of the td element, we bind up some simple jQuery:

$("td").on("click", function () {
   $(this).toggleClass("shrink enlarge"); 
});

Anytime a td is clicked (you can make the selector specific to a single td), we add toggle the "shrink" and "enlarge" classes. If "enlarge" was present to begin with, it is removed; otherwise it will be added. The same goes for "shrink".

edited Dec 27, 2013 at 20:58

answered Dec 27, 2013 at 20:25

Sampson

269k76 gold badges546 silver badges570 bronze badges

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

9 Comments

tymeJV Over a year ago

Gotta love the keywords in that description: toggles - class :)

Comfortably Numb Over a year ago

OP needs to change wording "enlarge" to "shrink" and vise versa

tymeJV Over a year ago

@YuriyGalanter -- This will do that, assuming one of the classes is set at page load.

Sampson Over a year ago

@BrianGlaz I think the OP is asking both how to change the class, and the text. I'll update my answer.

tymeJV Over a year ago

@YuriyGalanter -- My bad, the text ! -- Missed that, just add var text = $(this).hasClass("shrink") ? "shrink" : "enlarge"; //set the text then

|

Comfortably Numb · Accepted Answer · 2013-12-27 20:39:16Z

1

Change your HTML to

<th>
    <div>Click</div>
    <img class="magnifier" height="66" src="../Images/magnifier-zoom.png" width="75">
    <div>To Enlarge</div>
</th>

To have elements instead of text nodes.

Then you can do simple:

$('.magnifier').click(function() {

    var $next = $(this).next();

    $next.text($next.text() == 'To Enlarge' ? 'To Shrink' : 'To Enlarge');

})

Demo: http://jsfiddle.net/B7GDQ/

answered Dec 27, 2013 at 20:39

Comfortably Numb

39.9k17 gold badges82 silver badges147 bronze badges

6 Comments

Adjit Over a year ago

what about instead of all separate div's you used a span?

Comfortably Numb Over a year ago

DIVs keep elements with text that need changing separate and easy to access. Them being block elements make each item appear under each other like in the original <br> design. Could you please explain how a span would work?

Adjit Over a year ago

Thats what I was asking you. Would there be anyway to create <span class='action'> and then check it's text to change?

Comfortably Numb Over a year ago

My apologies, you mean instead of bottom DIV use a SPAN - that would hold "To Enlarge" or "To Shrink" action? Or a separate SPAN?

Adjit Over a year ago

I mean instead of the bottom DIV use a SPAN

|

vivekvasani · Accepted Answer · 2013-12-27 21:28:26Z

This is the direct answer to your questions, although not the best method:

$(".magnifier").on("click", function () {
  if ($(this).hasClass('enlarge')) {
    $(this).removeClass('enlarge');
    this.parentNode.lastChild.textContent = 'To Enlarge'
  }else{
    $(this).addClass('enlarge');
    this.parentNode.lastChild.textContent = 'To Shrink';
  }
});

The ideal method would be to use pseudo elements:

Codepen

HTML:

<div class="magnifier">
  Click<br/>
  <img height="66" src="../Images/magnifier-zoom.png" width="75"><br/>
</div>

CSS:

.magnifier::after {
  content: 'To Enlarge';
}
.magnifier.enlarge::after {
  content: 'To Shrink';
}

JS:

$(".magnifier").on("click", function () {
  $(this).toggleClass('enlarge');
});

Collectives™ on Stack Overflow

How to change a specific HTML string with jQuery

3 Answers 3

9 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related