Событие jquery click для добавления/удаления класса только в один div, когда несколько имеют одинаковые классы

У меня есть страница блога, в которой сообщения блога генерируются с использованием php. Все div имеют одинаковые классы, код PHP ниже:

$loopResult .= ' 
            <div class="blogbox show"> 
                <div class="blogtitle">'.$row['TITLE'].'</div> 
                <div class="blogdate">'.$row['DATE'].'</div>                    
                <div class="blogcontent">'.$row['CONTENT'].'</div> 
                <div class="blogimage"> <img src="'.$row['IMAGE'].'"/></div> 
                <div class="blogimage"> <img src="'.$row['IMAGEB'].'"/></div>
                <div class="blogimage"> <img src="'.$row    ['IMAGEC'].'"/></div> 
                <div class="showHide">Show/Hide</div>
            </div>              
    '; 
} 
echo $loopResult;

У меня есть функция щелчка jquery в div showHide, которая будет переключать класс для расширения div для чтения. JЗАПРОС:

$('.showHide').click(function() {
$('.blogbox').toggleClass('show');
});

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

Как мне это сделать, чтобы расширялся только выбранный div? Как видите, я относительно новичок в этом, поэтому любая помощь приветствуется.

Благодарю вас!


php html toggle jquery expand
person SteveMills04    schedule 09.11.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Попробуй это:

 $('.showHide').click(function() {
    $(this).closest('.blogbox').toggleClass('show');
    });
person Captain Planet    schedule 09.11.2014
comment
Потрясающий! Спасибо за быстрый ответ. Работал отлично. - person SteveMills04; 09.11.2014

arrow_upward
0
arrow_downward

Сделай это так.

$('.showHide').click(function(){
    $(this).toggleClass('show');
    });

Использование общего имени класса showHide в качестве селектора для события click, но ссылка только на фактический элемент с this поможет вам.

Вот вам скрипка: http://jsfiddle.net/hhgxsnv1/

А для более плавных эффектов вы также можете включить библиотеку пользовательского интерфейса jQuery: http://jsfiddle.net/hhgxsnv1/2/< /а>

$('.showHide').click(function(){
   $(this).toggleClass('show', 500, 'easeOutSine');
   });
person entiendoNull    schedule 09.11.2014