在if語句中插入HTML

Question

我有列表，我通過jQuery插入圖像。

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

這是我的清單

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

我這樣的導航列表很少。 單擊每個列表時，將調用“活動”類。

我需要的是當我點擊列表時，如果列表中有“活動”類，那么它應該附加一個html，否則它應該附加另一個html。

這是我下面的代碼我試過但沒有工作。

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

提前致謝。

Answer 1

您需要將代碼放入li.one元素的單擊處理程序中。 嘗試這個：

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

請注意，您還可以使用三元表達式縮短此代碼：

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

現在您已經添加了當前的HTML和JS代碼，我可以看到您可以使用單個事件處理程序來干掉代碼，該處理程序遍歷當前li的DOM以查找相關a元素。 嘗試這個：

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

Answer 2

根據您的新要求，您可以執行此操作來存儲圖標來源：

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

您可以使用屬性選擇器tag[attr]如下所示：

$(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

您應該將active類添加到當前單擊的li 。

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

現在，它會在點擊該項目時添加“活動”類，並在再次單擊相同的li時刪除“活動”類。