Jquery 不隐藏带有变量的 DIV答案

【问题标题】：Jquery doesn't hide DIV with variableJquery 不隐藏带有变量的 DIV
【发布时间】：2011-07-28 16:56:58
【问题描述】：

基于 HOVER 构建一个 JQUERY 菜单。当用户将鼠标悬停在 ID TYPO 上时，它会提取 TYPO ID 的编号并将其传递给 CAT 的 ID。因此，如果我将鼠标悬停在 DIV ID = TYPO2 上，它应该显示 DIV ID=CAT2。这很好用，只是我想在鼠标离开时隐藏 CAT，除非我再次声明并在 HOVER OUT 中重复 catId 变量，否则它不起作用。还有其他更有效的方法吗？

提前致谢

代码：

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

【问题讨论】：

typo 和 cat div 之间是否总是存在 1:1 的关系？

标签： jquery jquery-hover

【解决方案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（如果不需要）。

【讨论】：