使用Javascript和Hammer.js查找兄弟

使用Javascript和Hammer.js查找兄弟,javascript,jquery,html,hammer.js,Javascript,Jquery,Html,Hammer.js,我已经做了一个简单的系统,可以检测到双重抽头。我想在有人双击图像时显示一个心脏图标,就像在Instagram上一样 这就是我的代码现在的样子: var elements = document.getElementsByClassName('snap_img'); [].slice.call(elements).forEach(function(element) { var hammertime = new Hammer(element), img_src = element.g

我已经做了一个简单的系统,可以检测到双重抽头。我想在有人双击图像时显示一个心脏图标,就像在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>

洛杉矶是狗屎。。。
56分钟前
5477
所以当元素“snap_img”被双击时,我需要得到元素“like_heart”,它在snap_img元素下面一行。如何获取兄弟元素并使用JQuery将其淡入?

如下所示

[].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();
    });
});

另外,我已经添加了那个心脏文本,因为兄弟姐妹是空的。

在事件处理程序上,我会执行
$(元素).parent().find('.like_heart').fadeIn()因此代码不依赖于元素顺序


(要向选择器澄清:取父元素,即
div.snap\u项
,然后找到一个包含类
like heart
的元素)

非常感谢。兄弟姐妹是一个空div,但有一个背景图像(一个带有心形图标的精灵)。您的解决方案非常有效,非常感谢!!!:)@用户3608176很高兴它有帮助!如果有帮助的话,别忘了把它标记为答案;)当然我总是要等几分钟,直到我能接受答案。我马上就做!谢谢你的提示。我已经用Amit的解决方案解决了这个问题(见下面他的答案)。