使用 Javascript 和 Hammer.js 查找兄弟答案

【问题标题】：Find sibling with Javascript and Hammer.js使用 Javascript 和 Hammer.js 查找兄弟
【发布时间】：2014-10-12 12:10:37
【问题描述】：

我制作了一个简单的系统来检测双击。我想在有人双击图像时显示一个心形图标，就像在 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 将其淡入？

【问题讨论】：

标签： javascript jquery html hammer.js

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

附：我已经添加了那个心脏文本，因为兄弟姐妹是空的。

【讨论】：

非常感谢。兄弟是一个空的 div，但有一个背景图像（一个带有心形图标的精灵）。您的解决方案就像一个魅力，所以非常感谢！！！ :)
@user3608176 很高兴它有帮助！如果有帮助，请不要忘记将其标记为答案；）
当然！我总是要等几分钟才能接受答案。我马上去做！

【解决方案2】：

在事件处理程序上，我会做$(element).parent().find('.like_heart').fadeIn(); 所以代码不依赖于元素排序。

（为了澄清选择器：获取父元素div.snap_item并在其中找到一个类like-heart的元素）

【讨论】：

感谢您的提示。我已经用 Amit 的解决方案解决了这个问题（见下面他的回答）。