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 върху showHide div, която ще превключва клас, за да разшири div за четене. JQUERY:

$('.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 като селектор за събитието кликване, но препращането само към действителния елемент с this ще свърши работа вместо вас.

Ето една цигулка за вас: http://jsfiddle.net/hhgxsnv1/

И с по-плавни ефекти можете също да включите jQuery ui библиотеката: http://jsfiddle.net/hhgxsnv1/2/

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