Insert HTML inside if statement

Question

I have list where I am inserting the image through jQuery.

$("#icon1").html('<img src="images/summary_icon_u.png"  />');

This is my list

<ul>
    <li data-menuanchor="firstPage" class="one">
        <a href="#firstPage" class="cmIcon" id="icon1"></a>
    </li>
    <li data-menuanchor="secondPage" class="two">
        <a href="#secondPage" class="cmIcon" id="icon2"></a>
    </li>
</ul>

I have few navigation list like this. When each list is clicked, an 'active' class is called on.

My need is when I click the list, if the list has class 'active' then it should append a html or else it should append another html.

This is my code below I tried but not working.

$(document).ready(function() {
    $('li.one').click(function() {
        if ($(this).hasClass('active')) {
            $("#icon1").html('<img src="images/summary_icon_u.png" />');
        } else {
            $("#icon1").html('<img src="images/summary_icon_c.png" />');
        }
    });
    $('li.two').click(function() {
        if ($(this).hasClass('active')) {
            $("#icon2").html('<img src="images/audi_risk_u.png" />');
        } else {
            $("#icon2").html('<img src="images/audi_risk_c.png" />');
        }
    });
});

Thanks in advance.

Answer 1

You need to put your code in to a click handler for the li.one element. Try this:

$(document).ready(function() {
    $('li.one').click(function() {
        if ($(this).hasClass('active')) {
            $("#icon1").html('<img src="images/summary_icon_u.png" />');
        } else {
            $("#icon1").html('<img src="images/summary_icon_c.png" />');
        }
    });
});

Note that you can also shorten this code by using a ternary expression:

$(document).ready(function() {
    $('li.one').click(function() {
        $("#icon1").html('<img src="images/summary_icon_' + ($(this).hasClass('active') ? 'u' : 'c') + '.png" />');
    });
});

Now that you've added your current HTML and JS code I can see that you can DRY up the code with a single event handler which traverses the DOM from the current li to find the related a element. Try this:

$(document).ready(function() {
    $('li').click(function() {
        $(this).find('a').html('<img src="images/summary_icon_' + ($(this).hasClass('active') ? 'u' : 'c') + '.png" />');
    });
});

Answer 2

As per your new requirement you can do this to store the icon source:

<ul>
    <li data-menuanchor="firstPage" 
        data-imgsrc="summary_icon_c.png" 
        data-active-imgsrc="summary_icon_u.png" class="one">
        <a href="#firstPage" class="cmIcon" id="icon1"></a>
    </li>
    <li data-menuanchor="secondPage" 
        data-imgsrc="audi_risk_c.png" 
        data-active-imgsrc="audi_risk_u.png" class="two">
        <a href="#secondPage" class="cmIcon" id="icon2"></a>
    </li>
</ul>

You can use attribute selectors tag[attr] like this:

$(document).ready(function() {
    $('li[menuanchor]').click(function() {
        var src = $(this).hasClass('active') 
                  ? $(this).data('activeImgsrc') 
                  : $(this).data('imgsrc');
        $("a", this).html('<img src="images/'+ src +'" />');
    });
});

Answer 3

You should add the active class to current clicked li .

$('li > a').click(function() {
    $('li').removeClass("active");
    if($(this).parent().hasClass('active')) {
        $(this).parent().addClass('active');
    }
    else {
        $(this).parent().removeClass('active'); 
    }
});

Now it will add the class 'active' on click of that item and removes the class 'active' when you click on the same li again.