1

要素をネストしたときにコードが機能しない理由がわかりません...

これが私のhtmlコードです

<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="head.js"></script>
    <title>Test Page</title>
    <link rel="stylesheet" type="text/css" href="mock.css"
    />
</head>
<body>
    <div id="subMenu">
        <ul>
            <li class="button boxshadow">
                <a class="subnav" href="#">Test</a>
                <ul>
                    <li class="button boxshadow">
                        <a class="subnav" href="#">Testing</a>
                    </li>
                    <li class="button boxshadow">
                        <a class="subnav" href="#">Tested</a>
                    </li>
                </ul>
            </li>
            <li class="button boxshadow">
                <a class="subnav" href="#">Works</a>
            </li>
            <li class="button boxshadow">
                <a class="subnav" href="#">Other</a>
                <ul>
                    <li class="button boxshadow">
                        <a class="subnav" href="#">Other</a>
                    </li>
                    <li class="button boxshadow">
                        <a class="subnav" href="#">Other</a>
                    </li>
                </ul>
            </li>
            <li class="button boxshadow">
                <a class="subnav" href="#">Last</a>
                <ul>
                    <li class="button boxshadow">
                        <a class="subnav" href="#">Last1</a>
                    </li>
                    <li class="button boxshadow">
                        <a class="subnav" href="#">Last2</a>
                    </li>
                    <li class="button boxshadow">
                        <a class="subnav" href="#">Last3</a>
                    </li>
                    <li class="button boxshadow">
                        <a class="subnav" href="#">Last4</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>

私のCSS

.button {
    background: url(images / button.jpeg) no - repeat;
    background - size: 100 % ;
    position: relative;
    display: block;
    float: left;
    width: 165px;
    text - align: center;
    left: 25px;
    margin: 5px 10px;
}

そして私のjavascript/jquery

$(document).ready(function() {
    $('.button').bind("mouseover", function() {
        $(this).css("box-shadow", "0 0 10px 5px #B6B6B6");

        if ($(this).text().toLowerCase() == "test".toLowerCase()) {
            a = "blah."
            b = "blah."
            c = "blah."
            d = "blah."
            e = "blah."
            f = "blah."

            handle(a, b, c, d, e, f);
        }
        if ($(this).text().toLowerCase() == "works".toLowerCase()) {
            a = "blah"
            b = "blah."
            c = "blah"
            d = "blah"
            e = "Blah"
            f = "Blah"

            handle(a, b, c, d, e, f);
        }

        $(this).bind("mouseout", function() {
            $(this).css("box-shadow", "5px 5px 10px #070707");
        })
    })
})​

したがって、2 つのサブ リストがある「テスト」のように、リストにサブ項目がある場合を期待して、すべてが機能します。サブ項目をメイン リストに追加します。コードの .css 部分が動作しているため、マウスオーバーが動作しているとわかっていても、if ステートメントが動作しなくなります。

ここで何が起こっているかについてのアイデアは大歓迎です..私はJQueryが初めてで、サイトをJavaスクリプトではなくJQueryに移動しています。どうも

4

1 に答える 1

0

.toLowerCase() は String オブジェクトの関数部分であるため、文字列に対して直接使用できるかどうかはわかりません。

したがって、ハードコードするので、その値を正確に知っているのに、なぜこの関数を方程式の右側の部分で使用するのでしょうか?

if ($(this).text().toLowerCase() == "test")

問題を解決する必要があります。テストするには、console.log(あなたの状態) を試してください。

編集

あなたのコメントとコードに基づいて、それはセレクターおよび/またはhtml構造の問題のようです。より多くのliアイテムを含むliに適用される.buttonをターゲットにします。HTMLを同じレベルに「フラット化」するか、より簡単にセレクターとクラスを適合させることができます。しかし、最善のアプローチは次のとおりだと思います。

$(this).find("a").first().text(); // or "a:first"

おそらくもっときれいなものがあるでしょうが、これがどこに向かっているのか理解できますか? .first() を使用して、サブ li に入らないようにします。

于 2012-08-10T13:33:36.320 に答える