В jQuery, как я могу показать контент, ранее добавленный без повторного добавления? - PullRequest
Новая
       51

В jQuery, как я могу показать контент, ранее добавленный без повторного добавления?

0 голосов
/ 20 марта 2012

Изо всех сил пытался адекватно описать сценарий в вопросе.Я пытаюсь изучить jQuery, поэтому, без сомнения, в том, что у меня уже есть, будет куча ошибок.

Это код jQuery, который у меня есть. 

$(document).ready(function() {
 $('a.x', $('#innerlayout')).hover(
  function () {
   var path = $(this).attr('rel');
   var text = $(this).attr('title');
   $(this).append($("<p class='revealer'><img src='"+path+"' /><br />"+text+"</p>"));
   $('p.revealer').hide().fadeIn(500);
  }, 
  function () {
    $(this).find('p:last').hide();
    $(this).removeClass('x').addClass("revealed");
  }
 );
 $('a.revealed', $('#innerlayout')).hover(
  function() {
   $(this).find('p').show();
  },
  function() {
   $(this).find('p').hide();
  }
 );
});

иHTML - это, в основном, 

<a class="x" href="javascript:void(0)" rel="image1.jpg" title="Image">
 <img src="icon.jpg" width="40" height="40" alt="Icon" />
</a>

В моем предыдущем воплощении использовалась функция remove () для удаления тега p при наведении мыши, и все работало нормально.Я хотел попробовать изменить его так, чтобы контент был просто скрыт, а класс изменился так, что если mousenter произойдет снова, он просто покажет существующий контент.Вместо этого я обнаружил, что он все еще добавляет контент снова и складывается при каждом входе / выходе.Кто-нибудь может подсказать, где я ошибаюсь?

Ответы [ 3 ]

0 голосов
/ 20 марта 2012

Я бы сам избегал .append (), и либо использовал бы с jQuery .html (). 

  $('a.x', $('#innerlayout')).hover( 
  function () { 
   var path = $(this).attr('rel'); 
   var text = $(this).attr('title'); 
   $(this).children("span").html("<p class='revealer'><img src='"+path+"' /><br />"+text+"</p>"); 
   $('p.revealer').hide().fadeIn(500); 
  },  
  function () { 
    $(this).find('p:last').hide(); 
    $(this).removeClass('x').addClass("revealed"); 
  } 
 );

Тогда HTML что-то вроде: 

<a class="x" href="javascript:void(0)" rel="image1.jpg" title="Image">
 <span></span>
 <img src="icon.jpg" width="40" height="40" alt="Icon" />      
</a>

Извинениякак я не проверял, но, надеюсь, что-то, чтобы вы на правильном пути.Затем вы можете либо скрыть диапазон, либо переписать HTML-код, чтобы он был пустым.

0 голосов
/ 26 марта 2012

В итоге я воспользовался этим решением, которое обеспечивало требуемую функциональность. 

$(document).ready(function() {
 $('a.x', $('#innerlayout')).hover(
  function () {
  if($(this).hasClass('revealed')){
    $(this).find('p.revealer').fadeIn(500);
  }
  else{
   var path = $(this).attr('rel');
   var text = $(this).find('span.y').html();
   $(this).append($("<p class='revealer'><img src='"+path+"'/><br />"+text+"</p>"));
   $(this).find('p.revealer').hide().fadeIn(500);
   }
  }, 
  function () {
    $(this).find('p.revealer').hide();
    $(this).addClass("revealed");
  }
 );
});

с этим HTML 

<a class="x" href="javascript:void(0)" rel="image1.jpg">
 <img src="radio-hover.png" width="15" height="15" alt="Image available icon" />
 <span class="y" style="display:none;">Any follow up content required</span>
</a>

Первоначально атрибут title использовался для предоставления текста var, но яобнаружил, что мне иногда нужно включать html здесь, и поэтому принял этот подход.

0 голосов
/ 20 марта 2012

Вы должны добавить элемент только один раз, и при наведении курсора показать / скрыть его: 

 $('a.x', $('#innerlayout')).each(function() {
     var path = $(this).attr('rel');
     var text = $(this).attr('title');
     $(this).append($("<p class='revealer'><img src='"+path+"' /><br />"+text+"</p>").hide())
 });

 $('a.x', $('#innerlayout')).hover(
     function () {
         $('p.revealer').fadeIn(500);
      },
      ...

Перемещая вставку элемента за пределы наведения, он не будет создаваться снова и снова.

...