2

解决了：

感谢所有试图提供帮助的人

添加了此代码并且它有效：

$(function() {
$( ".itemContainer" ).click(function() {
    $(this).toggleClass( "showtheitem", 800 ),
    $(this).prev(".itemContainer").toggleClass("hide"),
    $(".itemContainer").not(this).prev(".itemContainer").removeClass("hide"),    

     $(".itemContainer").not(this).removeClass("showtheitem");
    return false;
});});

你可以在http://jsfiddle.net/JKnjz/3/看到它是如何工作的

我想在单击时将一个类添加到上一个项目，然后再次单击要删除的类。但是，如果我单击其他所有项目并将一个类添加到上一个项目，我也希望删除该类....

会尽量用代码来解释。我有 7 个 div

<div class="itemContainer">1</div>
<div class="itemContainer">2</div>
<div class="itemContainer">3</div>
<div class="itemContainer">4</div>
<div class="itemContainer">5</div>
<div class="itemContainer">6</div>
<div class="itemContainer">7</div>

CSS：

.itemContainer {float:left;width:100px;height:100px;background:#000;margin:5px;color:#fff}
.hide {display:none;}
.showtheitem {width:200px;height:200px;}

Javascript：

$(function() {
    $( ".itemContainer" ).click(function() {
        $(this).toggleClass( "showtheitem", 800 ),
        $(this).prev(".itemContainer").toggleClass("hide"),
         $(".itemContainer").not(this).removeClass("showtheitem");
        return false;
    });
});

因此，例如，如果我单击 div 编号 2，它会将类“隐藏”添加到 div 编号。1.如果我点击 div no. 2 它删除了隐藏类。那部分没问题。

但是如果单击 div no，我有一个问题。2它将“隐藏”类添加到div号。1 如果我点击例如 div no.6。“隐藏”类仍然保留在 div 上。没有 1。

如果我单击其他所有 div，我希望删除类“隐藏”。

在这里你可以看到它是如何工作的 jsfiddle.net/JKnjz/1

我希望我给出了明确的例子:)

4

5 回答 5

1

请参阅演示链接............，:)

http://api.jquery.com/toggleClass/

于 2012-11-21T06:23:18.050 回答
0

做这个

$(function() {
        $( "div.itemContainer").click(function() {
            $prevDiv = $(this).prev('div');
            $prevDiv.toggleClass('hide');
            $prevDiv.siblings().removeClass('hide');
            //return false;
        });
});

演示

于 2011-10-07T12:27:54.070 回答
0

我不确定你想要的行为实际上是什么，但删除“隐藏”类并不难。你可以这样做：

$(function() {
    $( ".itemContainer" ).click(function() {
        $(this).toggleClass( "showtheitem", 800 );
        $('.itemContainer.hide').removeClass('hide');
        $(this).prev(".itemContainer").toggleClass("hide");
        $(".itemContainer").not(this).removeClass("showtheitem");
        return false;
    });
});

关键是在开始隐藏所需的 div 之前删除所有隐藏项目的“隐藏”类。先取消隐藏，然后隐藏你想要的，只有那个会被隐藏。

任何其他预期的行为，如果你对你到底想要什么给出更多解释，那将是最好的......

于 2011-10-07T00:17:56.680 回答
0

像 Sander 一样，我不太明白你在问什么。下面是另一种方法，我取消了“toggleClass”业务，因为它可能是令人困惑的部分。听起来你想要的规则是：

  1. showtheitem一次只能有一个项目有这个类
  2. 具有类的当前项目“之前”的项目showtheitem应该将类hide添加到它

如果我没听错的话，这看起来怎么样？

$(".itemContainer").click(function() {
    $(this).siblings('.itemContainer').removeClass('hide');
    $(this).prev(".itemContainer").addClass("hide");
    $('.showtheitem').removeClass('showtheitem');
    $(this).addClass( "showtheitem", 800 );
});

如果我不明白，请发表评论，我们会到达那里。

于 2011-10-07T00:32:24.270 回答
0

如果我没有误解，您的目标是当用户单击项目 N 时：

  • 隐藏项目 N-1
  • 显示除 N-1 之外的所有隐藏项

权利？所以答案很明确：

$(function() {
    $( ".itemContainer" ).click(function() {
        $(".itemContainer.showtheitem").removeClass("showtheitem");
        $(this).toggleClass( "showtheitem", 800 )
        $(this).prev(".itemContainer").toggleClass("hide"),
        return false;
    });
});
于 2011-10-07T11:46:12.577 回答