Я хочу выбрать нужный элемент, который щелкнут каждым, я написал этот код 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, показанный ниже, не работает. У вас есть идея, как заставить его работать?
Спасибо, заранее
Я думаю, вам больше не нужно использовать их, так как прослушиватель событий уже привязан ко всем элементам класса .kspoiler
поэтому вам больше не придется перебирать их. А также лучше использовать псевдоним jQuery, $
(если у вас нет других библиотек, которые могут использовать $
).
$('.kspoiler').click(function() {
// click event handler
// $(this) refers to the clicked element
});
Вы не можете писать! 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();
}
});
Вы добавляете триггер для ВСЕХ элементов, каждый раз, когда они...
// 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') ))