Peter Featherstone Peter Featherstone - 2 months ago 18
jQuery Question

jQuery issue with toggling HTML codes

I am trying to check for the occurance of HTML decimal code and then switch accordingly, as per the Geometric Shapes on this page.

The code example is shown below, and the fiddle link is:

http://jsfiddle.net/w1sk6gsp/6/

$(document).ready(function() {

$( '.container' ).prepend( '<span class="HTML">&#9650;</span>' );
$( '.container' ).prepend( '<span class="Text">initial</span>' );

$( '.HTML' ).on( 'click', function() {

$( this ).html( $( this ).html() == '&#9650;' ? '&#9660;' : '&#9650;' );

} );

$( '.Text' ).on( 'click', function() {

$( this ).html( $( this ).html() == 'initial' ? 'switched' : 'initial' );

} );
});


I have included one called Text and one called HTML so you can see that it does work with text but not the HTML code, could anyone please explain how to get this to work and if not, at least the reasons why its not working.

Answer

To provide an accepted answer so it doesn't show as unanswered the solution as provided by @Regent is below:

$(document).ready(function() {

   $('.container').prepend('<span class="HTML">&#9650;</span>');
   $('.container').prepend('<span class="Text">initial</span>');

   $('.HTML').on('click', function() {  
      $(this).html($(this).html() == '\u25B2' ? '&#9660;' : '&#9650;');
   });

   $('.Text').on('click', function() { 
      $(this).html($(this).html() == 'initial' ? 'switched' : 'initial' );
   }); 

});