使jQuery可擴展以顯示和隱藏div

Question

我在菜單開始時有以下內容，當按鈕懸停在菜單上時顯示隱藏的div，但是希望能夠創建更多按鈕和關聯的div，而無需重復相同的jquery並僅更改id名稱。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<style>
#show, #show2 {
    position: absolute;
    visibility: hidden;
    height: 200px;
    width: 100%;
    background: #002061;
    color: white;
    z-index: 999;
    transition: all .5s ease-in-out;
    opacity: 0;
    box-shadow: inset 0 5px 16px #001031;

}
</style>


<button id="show_div">x</button>
<button id="show_div2">y</button>

<div id="show">show</div>
<div id="show2">show 2</div>


<script>
$(document).ready(function(){
    $("#show_div").mouseover(function() { 
        $("#show").css('visibility','visible').css('opacity','1'); 
    });
    $("#show_div").mouseout(function() { 
        $("#show").css('visibility','hidden').css('opacity','0'); 
    });
    $("#show").mouseover(function() { 
        $("#show").css('visibility','visible').css('opacity','1'); 
    });
    $("#show").mouseout(function() { 
        $("#show").css('visibility','hidden').css('opacity','0'); 
    });

    $("#show_div2").mouseover(function() { 
        $("#show2").css('visibility','visible').css('opacity','1'); 
    });
    $("#show_div2").mouseout(function() { 
        $("#show2").css('visibility','hidden').css('opacity','0'); 
    });
    $("#show2").mouseover(function() { 
        $("#show2").css('visibility','visible').css('opacity','1'); 
    });
    $("#show2").mouseout(function() { 
        $("#show2").css('visibility','hidden').css('opacity','0'); 
    });
});
</script>

我已經能夠采取一些措施使其能夠正常工作（見下文），但無法使其在多個按鈕上都能正常工作。 任何幫助將非常感激。 謝謝

<script>
var arr = [ "#showMe", "#showMe2" ];
jQuery.each( arr, function( i, val ) {
    $("#x").mouseover(function() { 
        $(val).css('visibility','visible').css('opacity','1'); 
    });
    $("#x").mouseout(function() { 
        $(val).css('visibility','hidden').css('opacity','0'); 
    });
    $(val).mouseover(function() { 
        $(val).css('visibility','visible').css('opacity','1'); 
    });
    $(val).mouseout(function() { 
        $(val).css('visibility','hidden').css('opacity','0'); 
    });
});
</script>

Answer 1

感謝您的幫助，這就是我最終得到的結果：

CSS

<style>
.menu {
    position: absolute;
    visibility: hidden;
    height: 200px;
    width: 100%;
    background: #002061;
    color: white;
    transition: all .5s ease-in-out;
    opacity: 0;
    box-shadow: inset 0 5px 16px #001031;
}
</style>

JS

<script>
$(function(){
    $("[id^=show]").mouseenter(function() {
        $("#div"+ this.id.split("show")[1]).css('visibility','visible').css('opacity','1'); 
    });
    $("[id^=show]").mouseleave(function() { 
        $("#div"+ this.id.split("show")[1]).css('visibility','hidden').css('opacity','0'); 
    });
    $("[id^=div]").mouseenter(function() {
        $("#div"+ this.id.split("div")[1]).css('visibility','visible').css('opacity','1'); 
    });
    $("[id^=div]").mouseleave(function() {
        $("#div"+ this.id.split("div")[1]).css('visibility','hidden').css('opacity','0'); 
    });
});
</script>

HTML

<button id="show1">x</button>
<button id="show2">y</button>

<div class="menu" id="div1">show</div>
<div class="menu" id="div2">show 2</div>

Answer 2

您想平淡無奇嗎？

現場演示

$("[id^=show]").hover(function() {
   $("#div"+ this.id.split("show")[1]).stop().fadeToggle();
});

需要的CSS：

#div1, #div2 {
    position: absolute;
                        /* remove CSS animations, opacity, */
    display:none;       /* and use DISPLAY instead of visibility */
    height: 200px;
    width: 100%;
    background: #002061;
    color: white;
    z-index: 999;
    box-shadow: inset 0 5px 16px #001031;
}

HTML：

<button id="show1">x</button>
<button id="show2">y</button>

<div id="div1">show</div>
<div id="div2">show 2</div>

---

除此以外...

DEMO

$("button[id^=show]").hover(function( e ) {
   var N = this.id.replace(/^\D+/g,'');
   var mEnt = e.type == "mouseenter" ; // true if mouseenter, false if mouseleave
   $("#div"+N).css({
     visibility: mEnt ? 'visible' : 'hidden',
     opacity   : mEnt ? 1 : 0
   }); 
});

它將從例如#show1抓取數字N並定位所需的#div1

還是一樣的：

$("button[id^=show]").hover(function( e ) {
   var m = e.type.match('t');
   $("#div"+ this.id.split("show")[1]).css({visibility:m?'visible':'hidden',opacity:mEnt?1:0}); 
});

---

Answer 3

'是的，使用類選擇器並像

<button class="main_class" id="show_div1">x</button>
<button class="main_class" id="show_div2">y</button>

<div id="show">show1</div> <div id="show2">show2</div>

在jquery代碼中，您可以使用：

$('.main_class').mouseover(function(event) {
 var first=event.target.id;
 var second="show"+first.slice(8);
   $("#"+second).show();
});

在mouseout事件中將使用類似類型的代碼，而不是可以使用hide（）的show（）函數，並且該代碼可用於任意數量的元素。