jquery - 获取特定标签

Question

我试图在单击第三个“i”标签时获取之前的“img”标签:

<div>
    <img src="img/image1.jpg" alt="image2"/>
    <div id="image_options">
        <i class="material-icons md-36">account_box</i>
        <label>djbaptou</label>
        <div id="left_icons">
            <i class="material-icons md-36 fav">favorite_border</i>
            <i class="material-icons md-36 purple">question_answer</i>
            <i class="material-icons md-36 full_screen">settings_overscan</i>
        </div>
    </div>
</div>

这是我的 jQuery 代码:

$(".full_screen").click(function(){
    var img = $(this).parent().parent().closest("img");
    modal.css("display", "block");
    modalImg.attr("src", img.attr("src"));
});

但是当我执行“alert(img);”时它说这是未定义的

有什么想法吗？

Answer 1

closest 不起作用，因为 i 元素不是 img 元素的后代 (根据定义；img 元素不能有子元素)。

在这种特定情况下，您可以使用parent().parent().prev()，但它很脆弱；当你随着时间的推移修改内容时，对标记的最轻微的改变都会弄乱它。我要做的就是向整个 div 添加一个类，然后使用 closest(".the-class").find("img")。

当然，由于带有 i 元素的 div 有一个 id，所以只需 $("#image_options").prev().

这是类选项的示例，其中单击第三个 i 元素会将图像从您的用户图标更改为我的:

$("i.purple").click(function() {
  $(this).closest(".the-class").find("img").attr("src", "https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG");
});

<div class="the-class">
    <img src="https://graph.facebook.com/10153295750512607/picture?type=small" alt="image2"/>
    <div id="image_options">
        <i class="material-icons md-36">account_box</i>
        <label>djbaptou</label>
        <div id="left_icons">
            <i class="material-icons md-36 fav">favorite_border</i>
            <i class="material-icons md-36 purple">question_answer</i>
            <i class="material-icons md-36 full_screen">settings_overscan</i>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>