Javascript 및 Hammer.js와 형제 찾기

두 번 두드리기를 감지하는 간단한 시스템을 만들었습니다. 누군가 Instagram에서와 마찬가지로 이미지를 두 번 탭하면 하트 아이콘을 보여주고 싶습니다.Javascript 및 Hammer.js와 형제 찾기

이 내 코드는 지금 모습입니다 : 요소 'snap_img는'탭을 두 번 때

<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>

그래서, 내가 얻을 필요가 :

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의 모습입니다 snap_img 요소 아래 한 줄에있는 요소 'like_heart'. 형제 요소를 가져와 JQuery로 페이드 인 (fade)하는 방법은 무엇입니까? 이

[].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.처럼

출처

2014-10-12 erol_smsr

나는 형제가 비었기 때문에 그 심장 텍스트를 추가했습니다.

출처

2014-10-12 12:13:21

덕분에 많은 :

합니다 (div.snap_item 인 부모 요소를 가지고 그 안에 클래스 like-heart이있는 요소를 찾아 선택을 명확히하기 위해)

. 형제는 빈 div이지만 배경 이미지 (하트 아이콘이있는 스프라이트)가 있습니다. 귀하의 솔루션은 매력처럼 작동하므로 많은 감사드립니다 !!! :) –

@ user3608176 도움이 되니 기쁩니다! 그것이 도움이된다면 대답으로 표시하는 것을 잊지 마세요.) –

물론! 나는 대답을 받아 들일 때까지 항상 몇 분을 기다려야한다. 내가 바로 할께! –

이벤트 처리기에서 수행 할 작업은 $(element).parent().find('.like_heart').fadeIn();입니다. 따라서 코드는 요소 순서에 종속되지 않습니다.

출처

2014-10-12 12:22:08 tonsteri

팁 주셔서 감사. 나는 Amit의 해결책으로 문제를 해결했다. (그의 대답은 아래 참조). –

Javascript 및 Hammer.js와 형제 찾기

답변

관련 문제