jQuery的点击不添加类

Question

I'm struggeling with some code, I have code to when I click a <p> element it changes the iframe src and removes the class 'active' of all the elements in the .html file and then add the class 'active' to the clicked element.

But the class 'active' never gets added to the clicked element.

JAVASCRIPT

function loadIframe(url){
    $('.iframe_settings').attr('src', url);
    $('.nav li').removeClass('active');
    $(this).addClass('active');
};

HTML

<li class="w-100" id="http://whatever.com/" onclick="return loadIframe(this.id);">
    <p>

        <i class="fa fa-id-badge" aria-hidden="true"></i>
        <span class="nav-label">Intranet</span>

    </p>
</li>

Answer 1

you could pass the context (element) to the handler. I expect this to work:

loadIframe(this.id, this)

And,

function loadIframe(url, element){
    $('.iframe_settings').attr('src', url);
    $('.nav li').removeClass('active');
    $(element).addClass('active');
};

Let me know if that works for you.

Stray comment: I am not sure if it is a good practice to call url an id. You might find data-attributes useful. Attributes like data-id = "" . In fact I would call it data-url .

Answer 2

you can not use $(this).addClass();

check this and this

Answer 3

You need to correct your code add identifier in correct way.

function loadIframe(url){
    $('.iframe_settings').attr('src', url);
    $('.nav li').removeClass('active');
    $("#"+url).addClass('active');
};