Question

我有一个代码可以在悬停不同的框时打开不同的框。我正在使用jquery，但它在第一个按钮上只打开一个框，我的代码如下：

<!--buttons are as follows-->

<div style="width:190px; height:415px; float:left;">
  <input type="button" id="menubut" class="but5" value="Women products " />
  <input type="button" id="menubut" class="but6" value="Kids products " />
  <input type="button" id="menubut" class="but7" value="Grocery products " />
  <input type="button" id="menubut" class="but8" value="Loan products " />
</div> 



<!--boxes are as follows-->
<div style="margin-left:190px; margin-top:10px; position:relative;">
    <div class="box1">
        <h1> BOX 1</h1> </div>
    <div class="box2">
        <h1> BOX 2</h1> </div>
</div>





$(document).ready(function() {

    $("#menubut").mouseenter(function() {
        var num = $(this).attr('class');
        alert(num);
        $(".box" + num).css("display", "block");
    });
    $("#menubut").mouseleave(function() {
        var num = $(this).attr('class');
        $(".box" + num).css("display", "none");
    });

});

Answer 1

任何给定元素都应该有一个id。如果您有两个或多个共享相同ID的元素，则只会考虑第一个元素。我已将所有按钮更改为具有相同的类.menubut，并将ID更改为唯一标识符。我还添加了两个框，将框从一个类更改为一个id，现在它们有一个匹配的按钮来显示/隐藏相应的框。

$(document).ready(function() {

    $(".menubut").mouseenter(function() {
        // Get the last character of the id
        var num = $(this).attr('id').slice(-1);
        // Hide that box
        $("#box" + num).hide();
    });
    $(".menubut").mouseleave(function() {
        // Get the last character of the id
        var num = $(this).attr('id').slice(-1);
        // Show that box
        $("#box" + num).show();
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--buttons are as follows-->

<div style="width:190px; height:415px; float:left;">
<input type="button" class="menubut" id="but1" value="Women products " />
<input type="button" class="menubut" id="but2" value="Kids products " />
<input type="button" class="menubut" id="but3" value="Grocery products " />
<input type="button" class="menubut" id="but4" value="Loan products " />
</div> 



<!--boxes are as follows-->
<div style="margin-left:190px; margin-top:10px; position:relative;">
    <div id="box1">
        <h1> BOX 1</h1> </div>
    <div id="box2">
        <h1> BOX 2</h1> </div>
    <div id="box3">
        <h1> BOX 3</h1> </div>
    <div id="box4">
        <h1> BOX 4</h1> </div>
</div>

Answer 2

检查一下： ID是唯一的，类不是唯一的

        <html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
     </head>
     <body>
    <script> 
        $(document).ready(function(){
            $(".buttton").mouseenter(function(){
                 var num = $(this).attr('id');               
                 $("#box" + num).hide();
                });
            $(".buttton").mouseleave(function(){
                 var num = $(this).attr('id');
                $("#box" + num).show();
               });
            });
        </script>
        <div style="width: 190px; height: 415px; float: left;">
            <input type="button" id="1" class="buttton"value="Women products " /> 
            <input type="button" id="2"  class="buttton" value="Kids products " /> 
            <input type="button" id="3" class="buttton" value="Grocery products " /> 
            <input type="button" id="4" class="buttton" value="Loan products " />
        </div>
        <div style="margin-left:190px; margin-top:10px; position:relative;">
                <div id="box1">
                    <h1> BOX 1</h1> </div>
                <div id="box2">
                    <h1> BOX 2</h1> </div>
               <div id="box3">
                    <h1> BOX 3</h1> </div>
                <div id="box4">
                    <h1> BOX 4</h1> </div>       
            </div>
    </body> 
    </html>

一个jquery函数用于在悬停不同按钮时打开不同的框

2 个答案: