JQuery выбрать правильный элемент, щелкнув с каждым

0

Я хочу выбрать нужный элемент, который щелкнут каждым, я написал этот код javascript, который не работает, когда я нажимаю на элемент, который он ничего не делает:

jQuery('.kspoiler').each(function() {

 jQuery('.kspoiler').click(function() {

        if ( !jQuery('.kspoiler-content').is(':visible') ) {

            jQuery(this).find('.kspoiler-content').show();

            jQuery(this).find('.kspoiler-expand').hide();

            jQuery(this).find('.kspoiler-hide').show();

        } else {

            jQuery(this).find('.kspoiler-content').hide();

            jQuery(this).find('.kspoiler-expand').show();

            jQuery(this).find('.kspoiler-hide').hide();

        }

    });

});

Мой HTML-код выглядит следующим образом:

   <div class="kspoiler">
    <div class="kspoiler-header">
        <span class="kspoiler-title">
            Warning: Spoiler!       </span>
        <span class="kspoiler-expand">
            [ Click to expand ]     </span>
        <span style="display:none" class="kspoiler-hide">
            [ Click to hide ]       </span>
    </div>
    <div class="kspoiler-wrapper"><div style="display:none" class="kspoiler-content">
            my content      </div>
    </div>
    </div>

Он может быть на странице больше, чем на приведенном ниже HTML-коде, мой javascript, показанный ниже, не работает. У вас есть идея, как заставить его работать?

Спасибо, заранее

Теги:

3 ответа

0

Я думаю, вам больше не нужно использовать их, так как прослушиватель событий уже привязан ко всем элементам класса .kspoiler поэтому вам больше не придется перебирать их. А также лучше использовать псевдоним jQuery, $ (если у вас нет других библиотек, которые могут использовать $).

$('.kspoiler').click(function() {
  // click event handler
  // $(this) refers to the clicked element
});
  • 0
    Да, он должен сделать это, если он использует другую библиотеку, которая тоже использует $ (например, MooTools)
  • 0
    @ Артур О, точно .. Я забыл об этой возможности, прости ...
Показать ещё 2 комментария
0

Вы не можете писать! JQuery ('. Kspoiler-content'). Is (': visible') - он ничего не выбирает. Также не нужно использовать функцию $ (каждая)

$('.kspoiler').click(function() {
    if ($(this).is(':hidden')) {
    $(this).find('.kspoiler-content').show();
    $(this).find('.kspoiler-expand').hide();
    $(this).find('.kspoiler-hide').show();
  } else {
    $(this).find('.kspoiler-content').hide();
    $(this).find('.kspoiler-expand').show();
    $(this).find('.kspoiler-hide').hide();
  }
});
  • 0
    Это немного лучше, но три элемента, которые нужно показать или скрыть, не изменяются при этом: jQuery (this) .find ('. Kspoiler-hide'). Show ();
-2

Вы добавляете триггер для ВСЕХ элементов, каждый раз, когда они...

// Loop for all '.kspoiler'
jQuery('.kspoiler').each(function() {
   // Add a trigger for all '.kspoiler'   
   jQuery('.kspoiler').click(function() {
       /***/
   });
});

Попробуйте удалить бесполезный цикл:

// Add a trigger for all 
jQuery('.kspoiler').click(function() {
   /***/
});

(С петлей вам нужно сделать :)

// Loop for all '.kspoiler'
jQuery('.kspoiler').each(function() {
   // Add a trigger for this one   
   jQuery(this).click(function() {
       /***/
   });
});

И это то же самое для вас, вам нужно выбрать ".kspoiler-content" в текущем клике:

if(jQuery(this).find('.kspoiler-content').is(':hidden') ))

Ещё вопросы

Сообщество Overcoder
Наверх
Меню