1
헤이 사람의 내가 요소를 중첩 때 내 코드가 작동하지 않는 이유를 알아낼 수 없습니다 ... JQuery if 문이 중첩 요소에서 작동하지 않습니까?
가 여기 내 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;
}
및 내 자바 스크립트/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 개의 하위 목록이있는 "test"와 같은 하위 항목이 있는데 "if"와 똑같은 하위 목록을 제거하면 "if"문이 작동합니다. 하위 목록을 기본 목록에 추가하자 마자 mouseover가 코드의 .css 부분을 작업하고 있기 때문에 작동하지 않는다고하더라도 if 문은 작동하지 않습니다.
여기에 무슨 일이 일어나고 있는지에 대한 아이디어는 크게 될 것입니다 appreciated .. 나는 JQuery에 익숙하지 않고 Java Script가 아닌 내 사이트로 이동하고 있습니다. thx
' "작품".toLowerCase()'? 왜? – undefined
예, 이유가 무엇입니까? 충분하다'$ (this) .text(). toLowerCase() === "test"' –
나는 중복을 알고 있지만, 당시에 얼마나 효과가 있었는지를보기 위해 메서드를 가지고 놀고 있었다. 원래 이것은 테스트 용이었다. 그리고 쓸모가 없다는 것을 나는 안다 : P ... 이제는 내 질문에 변화가있다. 3 가지 항목의 텍스트 값을 모두 잡아 내고 있다는 것을 알아 냈고, 그들은 모두 같은 클래스에 속해 있고 jquery 문은 $ 클래스에 있지만 여전히 개별적으로 커서를 가져 가면 불가능합니다. 코드의 .css 부분은 개별적으로 완벽하게 작동합니다. 왜 3 개의 텍스트를 모두 차지하고 있습니까? –