Jquery：动态添加和替换 <img>答案

【问题标题】：Jquery: Appending and replacing <img> dynamicallyJquery：动态添加和替换 <img>
【发布时间】：2011-09-15 08:11:24
【问题描述】：

我们希望有子菜单的 NAV 下拉指示器（箭头）。每当它有一类电流时，也会改变该指标。

我们有这样的代码

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Company Profile</a></li>
    <li>
      <a href="#" class="drop">Products</a>
      <ul>
        <li><a href="#">All Products</a></li>
        <li><a href="#">Products 1</a></li>
        <li><a href="#">Products 2</a></li>
        <li><a href="#">Products 3</a></li>
    </li>
    <li><a href="#">Contact Us</a></li>
  </ul>      
</nav>

动态地，我们希望在具有 sa 子菜单的 LI 上附加一个 IMG，从而将结果添加到这样的代码中

<nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Company Profile</a></li>
        <li>
          <a href="#" class="drop">Products
            <img src="li_gray.png">
          </a>
          <ul>
            <li><a href="#">All Products</a></li>
            <li><a href="#">Products 1</a></li>
            <li><a href="#">Products 2</a></li>
            <li><a href="#">Products 3</a></li>
        </li>
        <li><a href="#">Contact Us</a></li>
      </ul>      
    </nav>

最后，我们希望指示箭头在 LI 的 class="current" 时也发生变化。代码如下所示：**注意 IMG src 已更改为 li_white.png

<nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Company Profile</a></li>
            <li>
              <a href="#" class="drop current">Products
                <img src="li_white.png">
              </a>
              <ul>
                <li><a href="#">All Products</a></li>
                <li><a href="#">Products 1</a></li>
                <li><a href="#">Products 2</a></li>
                <li><a href="#">Products 3</a></li>
            </li>
            <li><a href="#">Contact Us</a></li>
          </ul>      
        </nav>

【问题讨论】：

小心，你的 html 无效，你没有关闭一些 <ul>s 。

标签： jquery navigation image html-lists

【解决方案1】：

在我看来，您应该只使用 image-backgrounds in css，而不是附加/更改图像。然后，您可以根据链接的状态（悬停、当前等）轻松更改背景图像，稍后更改它不会涉及对标记的任何 javascript 或服务器端操作。

更好的是，使用CSS image sprites！

更新：

这里是一个例子（没有 CSS 精灵）： http://jsfiddle.net/tsimbalar/JBcqB/

这个想法是为具有子导航的链接添加一个特殊的 CSS 类，并基于该类在 CSS 中进行所有样式设置。

更新 2

这里使用 CSS sprites（在这种情况下，来自 jQuery UI 的图标）。在这种情况下，我们只需“更改”:hover 上背景的位置，显示另一个图标。

http://jsfiddle.net/tsimbalar/gw686/

我们确实需要一些 javascript 来有条件地检查链接是否有子导航。

更新 3+4

它似乎无法在 IE 中正常工作（令人惊讶...），但我认为这是因为您使用了像 nav 这样的 HTML5 标签，如果不先做一个小技巧，就无法在 IE 中设置样式（参见 @ 987654324@)。用div 替换nav 可以正常工作，即使使用IE，即使链接之前已经有背景。

见http://jsfiddle.net/tsimbalar/gw686/embedded/result/

【讨论】：

感谢@tsimbalar；对 jquery 的太多渴望会让你忘记基础知识。 xD
@DoYouWantaWebsite 哈哈，是的，确实发生了 ;) 但总是想一想我们是否可以为禁用 javascript 的用户做一些事情（现在还存在吗？）
你能不使用图像背景技术也帮我解决这个问题吗？我忘记了我还有另一个问题，因为如果我们使用这种技术；我们已经有了背景。第一个是正常的渐变蓝色背景和我们 subnav 的 img。
@DoYouWanta 我已经更新了第二个示例，其中链接已经具有图像背景。我可以将 2 张图片放在一起，但需要做更多的工作……去看看吧！
实际上它适用于FF，但不适用于IE ...我认为这与IE不知道'nav'之类的HTML5元素并且不知道如何将样式应用于它没有一个小技巧 (html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2) .... 我认为它无法在 jsfidle 环境中正确应用...

【解决方案2】：

你可能想要一些这样的 jQuery。可能不是最优雅的解决方案，但应该为您指明正确的方向。

$(document).ready(function() {
    $("ul li").each(function() {
        if($(this).children("ul").length > 0) {
            var $link = $(this).find("a").first();
            var $newImg = $("<img src=\"li_gray.png\">");
            $link.addClass("current");
            $link.append($newImg);
        }
    })
});;

【讨论】：