javascript - 使用 Javascript 和 Hammer.js 查找同级

Question

我制作了一个简单的系统来检测双击。我想在有人双击图像时显示一个心形图标，就像在 Instagram 上一样。

这就是我的代码现在的样子:

var elements = document.getElementsByClassName('snap_img');

[].slice.call(elements).forEach(function(element) {
    var hammertime = new Hammer(element),
    img_src = element.getAttribute('src');
    hammertime.on('doubletap', function(event) {
        alert(img_src); // this is to test if doubletap works
        // Some javascript to show the heart icon
    });
});

HTML 如下所示:

<div class="snap_item">
    <div class="snap_item_following_info">
        <img class="snap_item_following_img" src="res/stat/img/user/profile/small/1.fw.png" alt="@JohnDoe" />
        <a class="snap_item_following_name" href="#">@JohnDoe</a>
        <div class="snap_too">

        </div>
    </div>
    <img class="snap_img" src="res/stat/img/user/snap/43/2.fw.png" alt="@ErolSimsir" />
    <div class="like_heart"></div>
    <div class="snap_info">
        <div class="snap_text">
            LA is the shit...
            <a class="snap_text_hashtah" href="@">#LA_city_trip</a>
        </div>
        <div class="snap_sub_info">
            <span class="snap_time">56 minutes ago</span>
            <div class="like inactive_like">
                <div class="like_icon"></div>
                <div class="like_no_active">5477</div>
            </div>
        </div>
    </div>
</div>

因此，当双击元素“snap_img”时，我需要获取元素“like_heart”，它位于 snap_img 元素下方一行。如何获取同级元素并使用 JQuery 使其淡入淡出？

Answer 1

像这样

[].slice.call(elements).forEach(function(element) {
    var hammertime = new Hammer(element),
    img_src = element.getAttribute('src');
    hammertime.on('doubletap', function(event) {
        alert(img_src); // this is to test if doubletap works
        $(element).next().text('♥').hide().fadeIn();
    });
});

附注我添加了该心形文本，因为 sibling 是空的。