在 if 语句中插入 HTML答案

【问题标题】：Insert HTML inside if statement在 if 语句中插入 HTML
【发布时间】：2016-05-31 19:22:58
【问题描述】：

我有通过 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" />');
        }
    });
});

提前致谢。

【问题讨论】：

你的点击功能在哪里？你能添加代码吗？
当我点击列表时，我需要突出显示图像，因为我已经制作了两个图像并通过 jQuery 调用它。我尝试了一种方式，如果列表具有“活动”类，则显示图像或显示另一个图像。
@Anoopkinayath 你能发布你的整个列表项目吗？
这是我的代码 $(document).ready(function() { $('li.one').click(function() { if ($(this).hasClass('active' )) { $("#icon1").html(''); } else { $("#icon1").html(''); } }); $('li.two').click(function() { if ($(this).hasClass('active')) { $("#icon2" ).html(''); } else { $("#icon2").html('') ; } }); });
列表：

【解决方案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" />');
    });
});

【讨论】：

嗨，罗里，谢谢。我已经在 jsfiddle 中更新了我的代码，请你看看。 jsfiddle.net/6021py6o

【解决方案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 +'" />');
    });
});

【讨论】：

嗨 Jai，我为每个列表设置了不同的图标
@Anoopkinayath，您可以使用 data-src 属性存储并使用它们。等待更新。
属性选择器代码不起作用。对不起。您能否检查一下我在 js fiddle 中的代码。 jsfiddle.net/6021py6o

【解决方案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 时删除“活动”类。

【讨论】：