多个Id和一个图像

问题描述 投票:-2回答:1

在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>
jquery
1个回答
0
投票

使用类,而不是ID。

更改您的HTML id=appleStoreMenuLabel1id=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();
    });
© www.soinside.com 2019 - 2024. All rights reserved.