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");
        })
    })
})​

因此，当我的列表中有子项目时，一切正常，例如在“test”中有 2 个子列表，我的 if 语句将在“测试我是否像“works”一样删除子列表时起作用。只要我将子项添加到我的主列表我的 if 语句停止工作，即使我知道鼠标悬停正在工作，因为它正在工作代码的 .css 部分。

任何关于这里发生的事情的想法将不胜感激。我是 JQuery 的新手，并且正在将我的网站移到它而不是 java 脚本。谢谢

4

1 回答 1

0

我不确定您是否可以直接在字符串上使用 .toLowerCase() ，因为它是 String 对象的函数部分。

因此，由于您对其进行了硬编码，因此您确切地知道它的值，为什么要在等式的右侧使用此函数？

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

应该可以解决您的问题，要对其进行测试，您应该尝试 console.log（您的情况）。

编辑

根据您的评论和代码，这似乎是选择器和/或 html 结构的问题。您的目标 .button 应用于包含更多 li 项目的 li 。您可以将您的 html“扁平化”到相同的级别，或者更简单地说，调整您的选择器和类。但我认为最好的方法如下：

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

可能有一些更漂亮的东西，但你能理解这是怎么回事吗？使用 .first() 来防止进入 sub li。

于 2012-08-10T13:33:36.320 回答