在jQuery中有一个干净的方法来执行一个条件语句,删除显示基于ID的图像。我尝试了一个声明并继续得到我需要的结果和这个图像。
//Text Hover to view image in Departments/Shopping
$(document).ready(function() {
if ($('html').attr('id') == 'appleStoreMenuLabel') {
$(this.id).hover(
function() {
$("#appleStoreLogo").show();
},
function() {
$("#appleStoreLogo").hide();
}
);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown-submenu" role="menu">
<a tabindex="1" href="searchResults.html" id="appleStoreMenuLabel">
Apple Store</a>
<ul class="dropdown-menu">
<li><a href="searchResults.html" id="appleStoreMenuLabel1">iPods
</a></li>
<li><a href="searchResults.html" id="appleStoreMenuLabel2">iPod
Accessories </a></li>
<li><a href="searchResults.html" id="appleStoreMenuLabel3">Watches</a></li>
<li><a href="searchResults.html" id="appleStoreMenuLabel4">Mac
Systems</a></li>
<li><a href="searchResults.html" id="appleStoreMenuLabel5">iPads</a></li>
<li><a href="searchResults.html" id="appleStoreMenuLabel6">Shop
All Apple Store</a></li>
</ul>
</li>
使用类,而不是ID。
更改您的HTML id=appleStoreMenuLabel1
,id=appleStoreMenuLabel2
...使用class=appleStoreMenuLabel
然后将您的JS更改为以下内容:
$('.appleStoreMenuLabel').hover(function () {
$("#appleStoreLogo").show();
},
function() {
$("#appleStoreLogo").hide();
});
更新
<ul class="dropdown-menu">
<li><a href="searchResults.html" id="iPods" class="appleStoreMenuLabel">iPods</a></li>
<li><a href="searchResults.html" id="iPodAccessories" class="appleStoreMenuLabel">iPod Accessories </a></li>
<li><a href="searchResults.html" id="watches" class="appleStoreMenuLabel">Watches</a></li>
...
</ul>
<!-- somewhere on your page -->
<img id="iPodAccessoriesimage" />
<img id="iPodsimage" />
<img id="watchesimage" />
$('.appleStoreMenuLabel').hover(function (event) {
$("#" + event.target.id + "image").show();
},
function() {
("#" + event.target.id + "image").hide();
});