jQuery를/자바 스크립트 변수가 다른 변수는 다음

Question

가치를 복용하는 것은 내 바이올린입니다 : http://jsfiddle.net/wr1k02ym/3/

거기에 텍스트 상자를 무시, 글 상자는 텍스트를 두 번 클릭하는 경우에만 표시로되어 있지만 몇 가지 이유에서의 상영에 대한 내가 자사의 CSS 문제를 생각 있도록 바이올린 (내 메인 프로그램에서 잘 작동

을 기본적으로, 범위의 텍스트과 같이 만약 내가, 텍스트를 표시하고있다 :.

<span class="output" title="lalalalalblas asdl sda lasdl asdb">lalalalalblas asdl...</span> 

텍스트가 너무 경우 오랫동안 텍스트의 일부만 표시하고 위에 마우스를 올리면 제목에있는 전체 텍스트가 표시됩니다. 내 자바 스크립트에서

내가 스위칭과 같이 수행하십시오에서 마우스 를 이동할 때 당신이 내 JS는 매우 간단하다 볼 수 있듯이

var tip; 
var orig; 
var switched = 0; 
$('.output').hover(
    function() { 
     tip = $(this).attr('title'); 
     orig = $(this).text(); 

     if (tip != orig) { 
      $(this).fadeOut(function() { 
       $(this).text(tip).fadeIn(); 
       switched = 1; 
      }); 
     } 
    }, 
    function() { 
     if (switched == 1) { 
      $(this).fadeOut(function() { 
       $(this).text(orig).fadeIn(); 
       switched = 0; 
       orig = ""; 
      }); 
     } 
    }); 
}); 

하지만, 문제가 발생 (테스트 내 바이올린으로 이동) 아래의 텍스트 위의 텍스트에 ... 그러면 어떤 이유로이 변수는 다른 변수의 값을 취하고 있습니다.

다른 변수 텍스트를 사용하지 않도록 어떻게 작동합니까?

Answer 1

tip, orig 및 switched 변수가 처리기 함수간에 공유되어 모든 요소간에 공유됩니다. 이 같은 각 요소에 대해 바르를 만들 수 있습니다

이제

$('.output').each(function() { 
    var tip; 
    var orig; 
    var switched = 0; 

    $(this).hover(function() { 
     tip = $(this).attr('title'); 
     orig = $(this).text(); 
     if (tip != orig) { 
      $(this).fadeOut(function() { 
       $(this).text(tip).fadeIn(); 
       switched = 1; 
      }); 
     } 
    }, function() { 
     if (switched == 1) { 
      $(this).fadeOut(function() { 
       $(this).text(orig).fadeIn(); 
       switched = 0; 
       orig = ""; 
      }); 
     } 
    }); 
}); 

, 각 출력 요소에 대한 tip, orig 및 switched있을 것입니다.

바이올린 :http://jsfiddle.net/wr1k02ym/4/