CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Adjit
Adjit

Reputation: 10305

How to change a specific HTML string with jQuery

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?

Upvotes: 3

Views: 130

Answers (3)

vivekvasani
vivekvasani

Reputation: 348

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

Upvotes: 0

Sampson
Sampson

Reputation: 268334

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

Upvotes: 3

suff trek
suff trek

Reputation: 39767

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/

Upvotes: 1

Related Questions