jquery on toggle只更改周围的divs类

Question

当我点击链接隐藏信息链接时，它会显示显示信息，但它也会更改页面上所有其他框中的文字，当我点击隐藏信息它会在div class =“revealBox”上切换类测试，但它会在所有框中执行，我想将它保存到相关的框中。< / p>

我知道这将与$（这个）有关我只是不知道如何实现它。

这是我的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

Answer 1

修改

好的我已经再次尝试了它 - 没有测试就改变了很多！请使用以下代码替换您的代码并提供建议。如果这不起作用，那么在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添加。