Question

这是我的代码，我不知道为什么它不起作用。我试图显示和隐藏多个div。我使用了几种方法来尝试隐藏和显示，我尝试用令人讨厌的结果切换。基本上，底部的div需要显示英雄部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Robert Eilers - Interview Test</title>


        <!-- BEGIN: css -->
        <link rel="stylesheet" type="text/css" href="assets/css/reset.css" /> 
        <link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="container">
    <div class="row">
        <div class="span12 product" id="showdiv1">
            <div class="span3">
                <p><img src="assets/images/01_md.jpg" /><p>
            </div>
            <div class="span3">
                <h6>Whirpool 4.5 Cu. Ft. Duet&#174; Steam Front Load Washer (Color: Cranberry Red) ENERGY STAR&#174;</h6>
                <ul>
                    <li>ENERGY STAR&#174; qualified</li>
                    <li>NSF&#174; Certified Sanitary cycles</li>
                    <li>FanFresh? option</li>
                </ul>    
            </div>
            <div class="span3">
                <p><input type="submit" value="Add to Cart" class="btn btn-danger btn-large"></p>
                <p>$1,599.00</p>
            </div>
        </div>


        <div class="span12 product" id="showdiv2">
            <div class="span3">
                <p><img src="assets/images/01_md.jpg" /><p>
            </div>
            <div class="span3">
                <h6>Whirpool 4.5 Cu. Ft. Duet&#174; Steam Front Load Washer (Color: Cranberry Red) ENERGY STAR&#174;</h6>
                <ul>
                    <li>ENERGY STAR&#174; qualified</li>
                    <li>NSF&#174; Certified Sanitary cycles</li>
                    <li>FanFresh? option</li>
                </ul>    
            </div>
            <div class="span3">
                <p><input type="submit" value="Add to Cart" class="btn btn-danger btn-large"></p>
                <p>$1,599.00</p>
            </div>
        </div>

        <div class="span12 product" id="showdiv3">
            <div class="span3">
                <p><img src="assets/images/01_md.jpg" /><p>
            </div>
            <div class="span3">
                <h6>Whirpool 4.5 Cu. Ft. Duet&#174; Steam Front Load Washer (Color: Cranberry Red) ENERGY STAR&#174;</h6>
                <ul>
                    <li>ENERGY STAR&#174; qualified</li>
                    <li>NSF&#174; Certified Sanitary cycles</li>
                    <li>FanFresh? option</li>
                </ul>    
            </div>
            <div class="span3">
                <p><input type="submit" value="Add to Cart" class="btn btn-danger btn-large"></p>
                <p>$1,599.00</p>
            </div>
        </div>

        <div class="span12 product" id="showdiv4">
            <div class="span3">
                <p><img src="assets/images/01_md.jpg" /><p>
            </div>
            <div class="span3">
                <h6>Whirpool 4.5 Cu. Ft. Duet&#174; Steam Front Load Washer (Color: Cranberry Red) ENERGY STAR&#174;</h6>
                <ul>
                    <li>ENERGY STAR&#174; qualified</li>
                    <li>NSF&#174; Certified Sanitary cycles</li>
                    <li>FanFresh? option</li>
                </ul>    
            </div>
            <div class="span3">
                <p><input type="submit" value="Add to Cart" class="btn btn-danger btn-large"></p>
                <p>$1,599.00</p>
            </div>
        </div>

        <div class="span12 product" id="showdiv5">
            <div class="span3">
                <p><img src="assets/images/01_md.jpg" /><p>
            </div>
            <div class="span3">
                <h6>Whirpool 4.5 Cu. Ft. Duet&#174; Steam Front Load Washer (Color: Cranberry Red) ENERGY STAR&#174;</h6>
                <ul>
                    <li>ENERGY STAR&#174; qualified</li>
                    <li>NSF&#174; Certified Sanitary cycles</li>
                    <li>FanFresh? option</li>
                </ul>    
            </div>
            <div class="span3">
                <p><input type="submit" value="Add to Cart" class="btn btn-danger btn-large"></p>
                <p>$1,599.00</p>
            </div>
        </div>

        <div class="span12 product" id="showdiv6">
            <div class="span3">
                <p><img src="assets/images/01_md.jpg" /><p>
            </div>
            <div class="span3">
                <h6>Whirpool 4.5 Cu. Ft. Duet&#174; Steam Front Load Washer (Color: Cranberry Red) ENERGY STAR&#174;</h6>
                <ul>
                    <li>ENERGY STAR&#174; qualified</li>
                    <li>NSF&#174; Certified Sanitary cycles</li>
                    <li>FanFresh? option</li>
                </ul>    
            </div>
            <div class="span3">
                <p><input type="submit" value="Add to Cart" class="btn btn-danger btn-large"></p>
                <p>$1,599.00</p>
            </div>
        </div>

    </div>

    <div class="row">
        <div class="span3 product" id="div1">
            <p><img src="assets/images/01_sm.jpg" /><p>
            <h6>Whirpool 4.5 Cu. Ft. Duet&#174; Steam Front Load Washer (Color: Cranberry Red) ENERGY STAR&#174;</h6>
            <p><input type="submit" value="Add to Cart" class="btn btn-danger btn-large"></p>
            <p>$1,599.00</p>
        </div>

        <div class="span3 product" id="div2">
            <p><img src="assets/images/02_sm.jpg" /><p>
            <h6>Whirpool 4.5 Cu. Ft. Duet&#174; Steam Front Load Washer (Color: Cranberry Red) ENERGY STAR&#174;</h6>
            <p><input type="submit" value="Add to Cart" class="btn btn-danger btn-large"></p>
            <p>$1,599.00</p>

        </div>
        <div class="span3 product" id="div3">
            <p><img src="assets/images/03_sm.jpg" /><p>
            <h6>Whirpool 4.5 Cu. Ft. Duet&#174; Steam Front Load Washer (Color: Cranberry Red) ENERGY STAR&#174;</h6>
            <p><input type="submit" value="Add to Cart" class="btn btn-danger btn-large"></p>
            <p>$1,599.00</p>

        </div>
    </div>

     <div class="row">
        <div class="span3 product" id="div4">
            <p><img src="assets/images/04_sm.jpg" /><p>
            <h6>Whirpool 4.5 Cu. Ft. Duet&#174; Steam Front Load Washer (Color: Cranberry Red) ENERGY STAR&#174;</h6>
            <p><input type="submit" value="Add to Cart" class="btn btn-danger btn-large"></p>
            <p>$1,599.00</p>
        </div>

        <div class="span3 product" id="div5">
            <p><img src="assets/images/05_sm.jpg" /><p>
            <h6>Whirpool 4.5 Cu. Ft. Duet&#174; Steam Front Load Washer (Color: Cranberry Red) ENERGY STAR&#174;</h6>
            <p><input type="submit" value="Add to Cart" class="btn btn-danger btn-large"></p>
            <p>$1,599.00</p>
        </div>
        <div class="span3 product showInfo" id="div6">
            <p><img src="assets/images/06_sm.jpg" /><p>
            <h6>Whirpool 4.5 Cu. Ft. Duet&#174; Steam Front Load Washer (Color: Cranberry Red) ENERGY STAR&#174;</h6>
            <p><input type="submit" value="Add to Cart" class="btn btn-danger btn-large"></p>
            <p>$1,599.00</p>

        </div>
    </div>

</div>


    <!-- BEGIN: js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
    $('#div1').hover(function() {
        $('showdiv[id^=showdiv]').hide();
        $('#showdiv1').show();
    });
    $('#div2').hover(function() {
        $('showdiv[id^=showdiv]').hide();
        $('#showdiv2').show();
    });

    $('#div3').hover(function() {
        $('showdiv[id^=showdiv]').hide();
        $('#showdiv3').show();
    });

    $('#div4').hover(function() {
        $('showdiv[id^=showdiv]').hide();
        $('#showdiv4').show();
    });
     $('#div5').hover(function() {
        $('showdiv[id^=showdiv]').hide();
        $('#showdiv5').show();
    });
     $('#div6').hover(function() {
        $('showdiv[id^=showdiv]').hide();
        $('#showdiv6').show();
    });

})
 </script>
</body>
</html>

Answer 1

        $('showdiv[id^=showdiv]').hide();

应该是

    $('[id^=showdiv]').hide();

第一个尝试选择<showdiv>的id为以不存在的showdiv开头的id，我想你只想要其id以showdiv开头的元素

使用jquery隐藏和显示多个div

1 个答案: