当多个具有相同的类时，jQuery单击事件仅向一个div添加/删除类答案

【问题标题】：jquery click event to add/remove class to only one div, when several have the same classes当多个具有相同的类时，jQuery单击事件仅向一个div添加/删除类
【发布时间】：2015-01-05 14:30:00
【问题描述】：

我有一个“博客”页面，其中的博客文章是使用 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;

我在 showHide div 上有一个 jquery click 函数，它将切换一个类以展开 div 以供阅读。查询：

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

显然，我的问题是点击功能会展开所有的博文，而不仅仅是用户点击的那一篇。

我该怎么做才能只扩展所选的 div？如您所见，我对此相对较新，因此不胜感激。

谢谢！

【问题讨论】：

标签： php jquery html toggle expand

【解决方案1】：

这样做。

$('.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');
   });

【讨论】：

【解决方案2】：

试试这个：

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

【讨论】：

太棒了！感谢您的快速回复。完美运行。