Jquery: добавление и замена <img>динамически - PullRequest
Новая
       16

Jquery: добавление и замена <img>динамически

0 голосов
/ 15 сентября 2011

Мы хотим иметь выпадающий индикатор (стрелка) для нашего 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>

Динамически мы хотим добавить IMG на LI, которые имеют подменю sa, в результатекод, подобный этому 

<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 = "текущий".Код выглядит примерно так: ** обратите внимание, что 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>

Ответы [ 2 ]

1 голос
/ 15 сентября 2011

Мне кажется, что вместо добавления / изменения изображений вы должны просто использовать фоновые изображения в css . Затем вы можете легко изменить фоновое изображение в зависимости от состояния ссылки (наведение, текущая и т. Д.), И изменение его позже не потребует каких-либо манипуляций на JavaScript или на стороне сервера с вашей разметкой.

Еще лучше, используйте CSS-спрайты !

ОБНОВЛЕНИЕ:

вот пример (без CSS-спрайтов): http://jsfiddle.net/tsimbalar/JBcqB/

Идея состоит в том, чтобы добавить специальный класс CSS для ссылок, имеющих суб-навигацию, и выполнить все стили в CSS на основе этого класса.

ОБНОВЛЕНИЕ 2

и здесь с использованием CSS-спрайтов (в этом случае значки из jQuery UI). В этом случае мы просто «меняем» положение фона на :hover, открывая еще один значок.

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

нам действительно нужно немного javascript , чтобы условно проверить, имеет ли ссылка субнавигатор или нет.

ОБНОВЛЕНИЕ 3 + 4

Кажется, он не работает должным образом с IE (удивительно ...), но я думаю, что это потому, что вы используете HTML5-теги, такие как nav, которые не могут быть стилизованы в IE без предварительного небольшого взлома (см. эта статья ). Замена nav на div работает нормально, даже с IE, даже если у ссылок уже был фон.

См. http://jsfiddle.net/tsimbalar/gw686/embedded/result/

0 голосов
/ 15 сентября 2011

Возможно, вам нужен 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);
        }
    })
});;
...