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以查找相关的{{1}元素。试试这个：

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

现在它将添加班级＆＃39;活跃＆＃39;点击该项目并删除该课程“活跃”＆＃39;当你再次点击同一个李时。

在if语句中插入HTML

3 个答案: