jquery - 小 JQuery 交互

Question

这是10个之一

<li class="application">
    <img class="iconapp" ..../>
    <p>
        <span class="spancat">....</span>
        <span class="prix>....</span>
        <span class="description">....</span>

        <span class="panier">
            <img .../>
        </span>
    </p>
</li>

所以我尝试当我点击“.panier”时，它将“.iconapp”的alt属性的值放在一个新的div中。我很难过，因为我有 10 个 <li> 像上面那样，当我点击任何 <li> 的任何“.panier”时，我总是得到第一个 <li> 中的 .icon 的 att li>（在警报中）。

这是我的 JQuery 代码：

$(function ()    {
    $(".panier").click(function ()
    {
        var nom = $(".iconeapp").attr("alt");
        alert(nom);
        $("#divcat").append("<div id='appspanier'>HOLLA</div>");
    })
})

希望你能帮助我。

谢谢！

Answer 1

当您使用$(".iconapp")它时，它会选择该类的所有元素，然后该.attr()方法从第一个元素中获取一个属性（如您所见）。要将单击的项目与.iconapp同li一个第一个起点this（被单击的项目）相关联，并通过 DOM 向上导航到 the .closest("li")，然后在该 li.find()内.iconapp：

$(function ()    {
    $(".panier").click(function ()
    {
        var nom = $(this).closest("li").find(".iconapp").attr("alt");
        alert(nom);
        $("#divcat").append("<div id='appspanier'>HOLLA</div>");
    });
});