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>

所以当元素＆＃39; snap_img＆＃39;双击，我需要得到元素＆＃39; like_heart＆＃39;这是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();
    });
});

P.S。我已经添加了心脏文本，因为兄弟姐妹是空的。

Answer 2

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

（澄清到选择器：获取div.snap_item的父元素并找到其中包含类like-heart的元素）

用Javascript和Hammer.js找到兄弟姐妹

2 个答案: