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.

Where is your click function ? Can you please add code for it ? — murli2308
– murli2308, Commented Feb 19, 2016 at 9:26
When I click on the list, I need to hightlight the image, for that I have made two images and called it through jQuery. I tried it in a way that if the list has 'active' class, display a image or else display another image. — Anoop kinayath
– Anoop kinayath, Commented Feb 19, 2016 at 9:27
This is my code $(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" />'); } }); }); — Anoop kinayath
– Anoop kinayath, Commented Feb 19, 2016 at 9:31
List: <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> — Anoop kinayath
– Anoop kinayath, Commented Feb 19, 2016 at 9:31

Rory McCrossan · Accepted Answer · 2016-02-19 09:35:19Z

8

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

edited Feb 19, 2016 at 9:35

answered Feb 19, 2016 at 9:22

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

1 Comment

Anoop kinayath Over a year ago

Hi Rory, Thanks. I have updated my code in jsfiddle, can you please have a look. jsfiddle.net/6021py6o

Jai · Accepted Answer · 2016-02-19 09:57:03Z

0

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

edited Feb 19, 2016 at 9:57

answered Feb 19, 2016 at 9:33

Jai

74.8k12 gold badges77 silver badges104 bronze badges

3 Comments

Anoop kinayath Over a year ago

Hi Jai, I have different icons for each list

Jai Over a year ago

@Anoopkinayath that you can store with data-src attribute and use those. wait updating.

Anoop kinayath Over a year ago

attribute selector code does not work . sorry. Could you please check my code in the js fiddle. jsfiddle.net/6021py6o

Shwetha · Accepted Answer · 2016-02-19 10:51:47Z

0

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.

answered Feb 19, 2016 at 10:51

Shwetha

9138 silver badges15 bronze badges

Collectives™ on Stack Overflow

Insert HTML inside if statement

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related