使用Javascript和Hammer.js查找兄弟
我已经做了一个简单的系统,可以检测到双重抽头。我想在有人双击图像时显示一个心脏图标,就像在Instagram上一样 这就是我的代码现在的样子:使用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
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的解决方案解决了这个问题(见下面他的答案)。