jQuery 문제

Question

다음은 나에게 완전히 도둑질 된 코드를 소개합니다.

$(".gig").hover(function() { 
    var id = $(this).attr("id"); 
    var time = $(this).attr("title"); 

    function() { 
     if (time > 0) 
     { 
      var answer = $('<div class="roll">Are you attending? <a href="' + id + '">Yes</a></div>').hide(); 

     } 
     else 
     { 
      var answer = $('<div class="roll">Did you attend?<a href="' + id + '">Yes</a> </div>').hide();    
     } 

     answer.appendTo($(this)).fadeIn("fast"); 
    } 
    function() { 
     $(this).find("div:last").fadeOut("fast", function() { 
      $(this).remove() 
     }); 
    } 
}); 

아시다시피, 그것은 끔찍합니다. 기본적으로 의사 코드와 같습니다. 아무도 내 엉망을 실제로 작동하는 코드로 다시 쓸 수있게 도와 줄 수 있습니까?

기본적으로 div라는 모든 클래스에 대해이 변수의 끝에 div 변수를 추가하고 mouseout에서 변수 answer를 제거해야합니다. 가변 시간은 롤오버 div의 제목에서 가져와 추가 된 새 div에 표시된 내용에 영향을줍니다. .gig의 ID는 단순히 URL로 전달되어야합니다.

hover answer 추가/제거 기능은 독자적으로 작동하지만 if 및 new 변수를 사용하여 새 기능에 배치 할 수 없습니다.

정말 고마워요.

Answer 1

이 부분은 나를 뛰어 내 렸습니다. . id . - .으로 문자열을 concatenate하지 않으며 자바 스크립트에서는 +을 사용합니다.

당신이 실수로이 코드를 게시했다는 사실은 A) 당신이 부족한 편집기를 가지고 있거나 B) Firebug과 같은 도구를 사용하여 자바 스크립트를 디버깅하지 않는다는 것을 말해줍니다. 당신은 아마 그것에 타야합니다. :)

당신은 하나의 거대한 함수에 모든 코드를 넣은 다음 두 개의 익명 함수를 선언 할 때 호버의 두 개의 함수 인수를 잘못 사용하려고합니다. (구문이 작동하는지도 확실하지 않습니까 ??)

다음은 올바른 코드입니다 (). 구문은이고 어떤 코드는 이라고 생각하면 로직이됩니다.) 코드 버전입니다. 소용돌이 치다.

Answer 2

편집

당신은 당신의 질문을 편집 해있다. 나는 이것이 당신이 원하는 일을해야한다고 생각 :

$(".gig").hover(function() { 
    var $this = $(this); 
    if(typeof $this.data('attendingLink') === 'undefined'){ 
     var id = $this.attr("id"); 
     var time = $this.attr("title"); 
     var a = $('<a />').text('Yes').attr('href', id); 
     var div = ('<div />').addClass('roll'); 
     if(time > 0){ 
      div.text('Are you attending?'); 
     } else { 
      div.text('Did you attend?'); 
     } 
     var answer = div.append(a); 
     $this.data('attendingLink', answer); 
    } else { 
     var answer = $this.data('attendingLink'); 
    } 
    answer.hide(); 
    answer.appendTo(this).fadeIn('fast'); 
}, function(){ 
    $(this).find("div.roll:last").fadeOut("fast", function() { 
      $(this).remove() 
    }); 
}); 

그러나 사용자 만의 preformance을 향상 :

이

$(".gig").hover(function() { 
    var $this = $(this); 
    var id = $this.attr("id"); 
    var time = $this.attr("title"); 
    var a = $('<a />').text('Yes').attr('href', id); 
    var div = ('<div />').addClass('roll'); 
    if(time > 0){ 
     div.text('Are you attending?'); 
    } else { 
     div.text('Did you attend?'); 
    } 
    var answer = div.append(a).hide(); 
    answer.appendTo(this).fadeIn('fast'); 
}, function(){ 
    $(this).find("div.roll:last").fadeOut("fast", function() { 
      $(this).remove() 
    }); 
}); 

당신은,하지만 이런 식으로 뭔가를 DOM 노드 생성을위한 몇 가지 캐싱을 사용하여 향상시킬 수 .gig 요소를 많이 가리 킵니다.

Answer 3

개인적으로, 필자는 호버가 아닌 각 요소에 대해 DOMReady를 초기화합니다. 그러나 당신은 당신이 원하는 방식으로 그렇게 할 수 있습니다. 여기 내가하는 일이있다.

$(function() { 
    $('.gig').each(function() { 
    id = $(this).attr('id'); 
    time = $(this).attr('title'); 
    answer = '<div class="roll">' + 
     (time > 0 ? 'Are you attending?' : 'Did you attend?') + 
     ' <a href="' . id .'">Yes</a></div>'; 
    $(this).append(answer); 
    }).hover(
    function() { $('.roll', this).show('fast'); }, 
    function() { $('.roll', this).hide('fast'); } 
); 
});