0

これが私のコードです。なぜ機能しないのかわかりません。複数の 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>
4

1 に答える 1

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

する必要があります

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

最初のものは、存在しない showdiv で始まる ID を持つ s を選択しようとします<showdiv>。id が showdiv で始まる要素だけが必要だと思います

于 2012-08-23T23:02:12.883 に答える