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

我製作了一個檢測雙擊的簡單系統。當有人在圖像上雙擊時，我想顯示一個心臟圖標，就像在Instagram上一樣。用Javascript和Hammer.js找到兄弟姐妹

這是我的代碼的外觀現在：

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淡入其中？

來源

2014-10-12 erol_smsr

像這樣

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

附：我已經添加了心臟文字，因爲兄弟姐妹是空的。

來源

2014-10-12 12:13:21

感謝。兄弟姐妹是一個空的div，但有一個背景圖像（一個帶有心臟圖標的精靈）。你的解決方案就像一個魅力，所以非常感謝！ :) – 2014-10-12 12:22:31

@ user3608176很高興幫助！如果有幫助，不要忘記標記爲答案;） – 2014-10-12 12:24:12

當然！我總是要等幾分鐘，直到我能接受答案。我馬上去做！ – 2014-10-12 12:24:45

在事件處理程序上，我會做$(element).parent().find('.like_heart').fadeIn();所以代碼不依賴於元素排序。

（爲了澄清到選擇器：取這是div.snap_item父元素，並用like-heart類在其內部發現的元素）

來源

2014-10-12 12:22:08 tonsteri

感謝您的提示。我已經用Amit的解決方案解決了這個問題（請參閱下面的答案）。 – 2014-10-12 12:23:18

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

回答

相關問題