切换时，jquery仅更改周围的divs类

问题描述

| 当我单击链接“隐藏信息”链接时，它会显示“显示信息”，但也会更改页面上所有其他框的文本，当我单击“隐藏信息”时，它也会切换div class = \“ revealBox \”上的类测试，但是在所有包装盒上都要做，我只想保留在相关包装盒上。 我知道这与$（this）有关，我只是不知道如何实现它。 这是我的jQuery

$(document).ready(function() {
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showtext=\'Hide information\';
var hideText=\'Show information\';
var is_visible = false;
$(\'.collapseLink\').append(\'<span class=\"dottedBot\">\'+showtext+\'</span>\');
$(\'.revealBoxContents\').show();
$(\'a.collapseLink\').click(function() {
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showtext : hideText);
// toggle the display - uncomment the next line for a basic \"accordion\" style
//$(\'.toggle\').hide();$(\'a.toggleLink\').html(showtext);
$(this).parent().next(\'.revealBoxContents\').slidetoggle(\'slow\');
// return false so any link destination is not followed
return false;
});
// toggle the bottom link
$(\'.collapseLink\').click(function(){
     $(this).parents(\'.revealBoxContents\').stop(true,true).slidetoggle(\'slow\');    
     $(\".collapseLink\").html( (!is_visible) ? showtext : hideText);
    $(this).parent(\'.item\').toggleClass(\'current\');

}); 

$(\".revealBoxTop a\").click(function(){
        $(this).toggleClass(\"closed\").next().slidetoggle(\"slow\");
        return false; //Prevent the browser jump to the link anchor
    });

    $(\'.revealBox a\').click(function() {
        $(\".revealBox\").toggleClass(\"test\");
    });


});

这是网址 http://satbulSara.com/NSJ-local/eqs1.htm     

解决方法

编辑 好吧，我再接再厉-没有测试就改变了很多！请用下面的代码替换您的代码并提出建议。如果这样做不起作用，最好在http://www.jsbin.com或http://www.jsfiddle.net上建立演示

// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText=\'Hide Information\',hideText=\'Show Information\';

$(\'.collapseLink\').append(\'<span class=\"dottedBot\">\'+showText+\'</span>\');
$(\'.revealBoxContents\').show();

// toggle the bottom link
$(\'.revealBox .collapseLink\').click(function(e){
         e.preventDefault();
         var $targetContainer = $(this).parents(\'.revealBox\').find(\'revealBoxContents\');
         $targetContainer.stop(true,true).slideToggle(\'slow\');
         if ($targetContainer.is(:visible) {
             $(this).html(showText);
         else {
             $(this).html(hideText);
         }
         // this line below doesn\'t do anything - can\'t find an element .item
         $(this).parent(\'.item\').toggleClass(\'current\');
}); 

$(\'.revealBox a\').click(function() {
    // ONLY TARGET PARENT REVEAL BOX
    $(this).parents(\".revealBox\").toggleClass(\"test\");
});

希望我们越来越近！ 编辑3 前进并使用示例html制作了模型： http://jsbin.com/iceyi3/edit 编辑：修改版本：http://jsbin.com/iceyi3/2/edit 我从上面的代码中发现了许多粗心的错误-为此我深表歉意！ \'隐藏文本\'/ \'显示文本\'的重复之处是因为在某些区域，这些内容存在于html中，并由javascript添加。