fadeOut() только угасает первый элемент

По умолчанию у меня есть несколько DIVs, а затем я исчезаю, когда пользователь нажимает на определенную кнопку. Это работает отлично, но когда я пытаюсь закрыть dholder .holder, используя диапазон в указанном .holder DIV, работает только первый. Когда я нажимаю остальные, ничего не происходит. Я не получаю никакой ошибки или какой-либо визуальной обратной связи.fadeOut() только угасает первый элемент

Разметка:

<div class="holder" id="window_one"> 
    <div class="title_bar"> 
     <p>Window 1</p> 
     <div class="control_holder"> 
      <span class="controls" id="close">X</span> 
      <span class="controls" id="minimize">_</span> 
     </div> 
    </div> 
    <div class="interface"> 
     <p>Testing123</p> 
    </div> 
</div> 
<div class="calculator" id="window_two"> 
    <div class="title_bar"> 
     <p>Window 2</p> 
     <div class="control_holder"> 
      <span class="controls" id="close">X</span> 
      <span class="controls" id="minimize">_</span> 
     </div> 
    </div> 
    <div class="interface"> 
     <p>Testing123</p> 
    </div> 
</div>

JQuery:

$(document).ready(function() { 
    $('#close').click(function() { 
     $(this).parents('.holder').fadeOut(250); 
    }); 
});

Что именно я здесь делаю неправильно? Я использую jQuery 1.10.2, если это имеет значение.

Я бы demo код на jsFiddle, но, похоже, вниз atm.

источник

2013-09-22 Kasim Ahmic

Идентификаторы должны быть уникальными, классы использования –

вы можете иметь несколько классов для одного объекта, просто слипались с пространством , т.е. class = "class1 class2", этот объект может быть addreses как .class1 или .class2 .... поэтому используйте класс вместо уникальных идентификаторов ... и затем не забывайте, что он даст вам массив, поэтому запускайте массив и сделайте это для каждого элемента> | –

@ M.Svrcek Ой, забыл об этом, спасибо! –

Вы не можете иметь один и тот же идентификатор двух элементов на странице. Если вы хотите сделать это дать ему в качестве имени класса, как -

<div class="holder" id="window_one"> 
    <div class="title_bar"> 
     <p>Window 1</p> 
     <div class="control_holder"> 
      <span class="controls close">X</span> 
     </div> 
    </div> 
    <div class="interface"> 
     <p>Testing123</p> 
    </div> 
</div> 
<div class="calculator" id="window_two"> 
    <div class="title_bar"> 
     <p>Window 2</p> 
     <div class="control_holder"> 
      <span class="controls close">X</span> 
     </div> 
    </div> 
    <div class="interface"> 
     <p>Testing123</p> 
    </div> 
</div>

и Jquery как -

$(document).ready(function() { 
    $('.close').click(function() { 
     $(this).parents('.holder').fadeOut(250); 
    }); 
});

Надеется, что это поможет.

источник

2013-09-22 22:55:39 Ritesh

Работал отлично, спасибо! Забыл о нескольких предметах: P –

Вот как это должно быть:

<div class="holder" id="window_one"> 
    <div class="title_bar"> 
     <p>Window 1</p> 
     <div class="control_holder"> 
      <span class="controls close">X</span> 
     </div> 
    </div> 
    <div class="interface"> 
     <p>Testing123</p> 
    </div> 
</div> 
<div class="calculator" id="window_two"> 
    <div class="title_bar"> 
     <p>Window 2</p> 
     <div class="control_holder"> 
      <span class="controls close">X</span> 
     </div> 
    </div> 
    <div class="interface"> 
     <p>Testing123</p> 
    </div> 
</div>

и JavaScript:

$(document).ready(function() { 
    $('.close').click(function(e) { 

     $(this).parents('.holder').forEach(function(){ 

        $(this).fadeOut(250); 

         }); 

     e.preventDefault(); 
    }); 

});

источник

2013-09-23 01:27:35

fadeOut() только угасает первый элемент

ответ

Смежные вопросы