JQueryは変数DIVを非表示にしません

Question

HOVERに基づいてJQUERYメニューを作成します。ユーザーがID TYPO上にマウスを置くと、TYPO IDの番号が抽出され、CATのIDに渡されます。ですから、DIV ID = TYPO2にカーソルを置くと、DIV ID = CAT2と表示されます。これはうまく動作しますが、マウスが離れるとCATを非表示にしたいのですが、もう一度宣言してHOVER OUTのcatId変数を繰り返さないと動作しません。 もう一つの効率的な方法がありますか？事前に

おかげで

CODE：あなたはクラスを使用して、データ属性場合

<script> 
$(document).ready(function() { 
$("#cat1, #cat2, #cat3").hide(); 

$("#typo1, #typo2, #typo3").hover(function(){ 
var catId = $(this).attr('id'); 
catId = catId.substring(4,5); 
$("#cat"+catId).show("fast") 
}, 
function(){ 
var catId = $(this).attr('id'); 
catId = catId.substring(4,5); 
$("#cat"+catId).hide("fast") 
}); 
}); 
</script> 
    <div id="container"> 
    <div id="typo"> 
     <div id="typo1" class="typo">Typo1</div> 
     <div id="typo2" class="typo">Typo2</div> 
     <div id="typo3" class="typo">Typo3</div> 
    </div> 
    <div class="clear"></div> 
    <div id="cat"> 
     <div id="cat1">CAT1</div> 
     <div id="cat2">CAT2</div> 
     <div id="cat3">CAT3</div> 
    </div> 
</div> 

Answer 1

それは物事がはるかに簡単になります：

<script> 
    $(document).ready(function() { 
     $(".cat").hide(); 

     $(".typo").hover(function(){ 
      var catId = $(this).data('id'); 
      $(".cat[data-id='"+catId+"']").show("fast") 
     }, 
     function(){ 
      var catId = $(this).data('id'); 
      $(".cat[data-id='"+catId+"']").hide("fast") 
     }); 
    }); 
</script> 


<div id="container"> 
    <div id="typo"> 
     <div data-id="1" class="typo">Typo1</div> 
     <div data-id="2" class="typo">Typo2</div> 
     <div data-id="3" class="typo">Typo3</div> 
    </div> 
    <div class="clear"></div> 
    <div id="cat"> 
     <div data-id="1" class="cat">CAT1</div> 
     <div data-id="2" class="cat">CAT2</div> 
     <div data-id="3" class="cat">CAT3</div> 
    </div> 
</div> 

あなたはまた、完全にIDを取り除くことができます今（必要でない場合）。