jquery toggleClass, removeClass

Question

Решено:

Благодаря eveyrone, который пытался помочь

Добавил этот код, и он заработал:

$(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 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, он добавит класс «hide» к div no. 1. Если я нажму на div нет. 2 это удаляет этот класс скрытия. Эта часть в порядке.

Но у меня проблема с нажатием на div no. 2 это добавить класс «скрыть» к div нет. 1 и если я нажму, например, на div № 6. класс «скрыть» по-прежнему остается на div. № 1.

Я хочу, чтобы класс "hide" был удален, если я нажму на каждый другой div.

здесь вы можете увидеть, как это работает jsfiddle.net/JKnjz/1

Надеюсь, я привел четкий пример :)

Answer 1

См. Демонстрационную ссылку ........,:)

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

Answer 2

сделать это

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

DEMO

Answer 3

Как и Сандер, я не совсем понимаю, о чем ты просишь.Ниже приведен еще один подход: я забрал бизнес «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 );
});

Если я не понял, пожалуйста, оставьтекомментарий, и мы получим там.

Answer 4

Если я не пойму неправильно, ваша цель - когда пользователь нажимает элемент N:

• скрыть вещь N-1
• показать все скрытые предметы, кроме N-1

права? Таким образом, ответ довольно ясен:

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

Answer 5

Я не уверен, каково на самом деле ваше желаемое поведение, но удалить класс 'hide' не так сложно.Вы можете сделать это следующим образом:

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

ключ заключается в том, чтобы удалить класс 'hide' из всех скрытых элементов, прежде чем вы начнете скрывать нужный вам div.После того, как сначала скрыть все, а затем скрыть тот, который вам нужен, будет скрыт только этот.

любое другое ожидаемое поведение, будет лучше, если вы дадите больше объяснений того, что именно вы хотите ...