Добавить и удалить класс разных элементов

Question

Так что я в настоящее время изучаю jquery и немного tweenlite для анимации (я хочу сохранить его в качестве основного). Поэтому im в настоящее время строит сетку портфолио, но я хочу добавить по щелчку элемента, который другой элемент затухает (скользящий справа он не имеет значения).

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

Я создал кодекс, чтобы показать, где моя борьба.

Я надеюсь, что я довольно ясно с описывая эту проблему :)

HTML

<div class="box"> 
    <div class="show">Show 1</div> 
    </div> 

    <div class="bigbox"> 
    <div class="removeit"> 
     <div class="bigshow">Bigshow 1</div> 
    </div> 
    </div> 

    <div class="box"> 
    <div class="show">Show 2</div> 
    </div> 

    <div class="bigbox"> 
    <div class="removeit"> 
     <div class="bigshow">Bigshow 2</div> 
    </div> 
    </div> 

</div> 

CSS

.container { 
    overflow: auto; 
    margin: 0 auto; 
    width:500px; 
} 

.box { 
    height:200px; 
    width:200px; 
    background:yellow; 
    text-align:center; 
    cursor:pointer; 
    margin:0 auto; 
    float:left; 
    margin-right:50px; 
} 

.bigbox { 
    height:100%; 
    width:100%; 
    background-color: grey; 
    z-index:100; 
    left:0; 
    opacity: 0; 
    position: fixed; 
    display:none; 
    top:0; 
    .removeit { 
    height:100px; 
    width: 100px; 
    top: 0; 
    right:0; 
    background-color: blue; 
    margin:0 auto; 
    cursor:pointer; 
    } 
} 

    .show { 
    display:block; 
    } 
    .noscroll { 
    overflow:hidden; 
    } 

Javascript

$(".box").click(function(){ 
    $(".bigbox").addClass("show"); 
    TweenLite.to($('.bigbox'), 0.5, { 
     opacity:1, 
     autoAlpha:1 
    }); 
}); 

$(".removeit").click(function(){ 
    TweenLite.to($('.bigbox'), 0.5, { 
     autoAlpha:0, 
     opacity:0 
    }); 
}); 

Codepen

http://codepen.io/denniswegereef/pen/MwjOXP

Answer 1

Как я уже говорил в комментариях, я думаю, что это возможно, находя общий язык между коробкой и BigBox, и если мы не изменить HTML. Эта общая основа должна быть равна с индексом из их соответствующих классов.

• Так хранить clickedIndex переменной в первой, внутри обработчика щелчка так: var clickedIndex=$('.box').index($(this));.
• И затем подайте это clickedIndex, чтобы получить выборочный bigbox примерно так: var bigbox=$(".bigbox").eq(clickedIndex);.
• И, наконец, используйте это bigbox переменная, чтобы затухать или выходить.

Вот ваш модифицированный JavaScript:

var bigbox = null; 
var clickedIndex = -1; 
var boxElements=$(".box"); 
var bigboxElements=$(".bigbox"); 
var removeItElements=$(".removeit"); 
boxElements.click(function() { 
    clickedIndex = boxElements.index($(this)); 
    bigbox = bigboxElements.eq(clickedIndex); 
    bigbox.addClass("show"); 
    TweenLite.to(bigbox, 0.5, {opacity: 1,autoAlpha: 1}); 
}); 

removeItElements.click(function() { 
    clickedIndex = removeItElements.index($(this)); 
    bigbox = bigboxElements.eq(clickedIndex); 
    TweenLite.to(bigbox, 0.5, {autoAlpha: 0,opacity: 0}); 
}); 

Единственная проблема такого подхода заключается в том, что она очень сильно зависит от того, с помощью которого HTML выложенный.