JQuery Traversing и простой код?

Question

Хорошо, прежде чем я задаю этот вопрос.Позвольте мне объяснить мою цель: я хочу писать как можно меньше кода, и все же сможете одновременно иметь тонны функциональности.Я придумал это как «красивый код» себе и коллегам.

Вот проблема: я хочу нажать в коробку, а панель, чтобы выцветать с нужным контентом на основе какого ящика я нажал.За исключением того, что я не могу использовать два класса и не можете повторно использовать идентификатор.

Вот код: http://jsfiddle.net/2yr67/

$('.maingrid').click(function(){
    //'maingrid' fade out
    //'panel' fade in with proper content
});

.

У меня были две идеи, которые будут порадовать меня.

a) имеют одну панель исчезнуть, а контент заполнить панель на основе какого «Maintrid», который был «щелкнуть» B) иметь определенную панель с содержимым исчезновением, основанным на том, какой «Maingrid» был выбран

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

Спасибо заранее!

Answer 1

Первое, что нужно сделать, это перемещать панель HTML-элементы ближе к элементам Mainingrid.Это позволяет скрывать / показывать правильные элементы в порядке.Наличие всех панелей в своем собственном отдельном элементе заставляет вас делать манипулирование DOM, поэтому не нужно делать.Для простоты я положил каждую панель сразу после того, как элемент Mainingrid его связан с ним.

Структура HTML

<div class=".mainContainer">
   <div class='maingrid'></div>
   <div class='panel'></div>
   <div class='maingrid'></div>
   <div class='panel'></div>
   <div class='maingrid'></div>
   <div class='panel'></div>
   <div class='maingrid'></div>
   <div class='panel'></div>
</div>

.

Я добавил класс панели, чтобы иметь одинаковые CSS, что и Maingrid, а также сделать его невидимым в начале:

.maingrid, .panel {
    height: 345px;
    width: 345px;
    float: left;
    /* [disabled]background-color: #000; */
    margin-top: 5px;
    margin-right: 5px;
    cursor: pointer;
    overflow: hidden;
}
.panel{
    display:none;
    color:white; 
}

.

Это исчезнет текущий элемент, щелкнувшись и исчезает на следующем элементе панели.

$('.maingrid').click(function(){
        var $that = $(this);
        $(this).fadeOut(function(){  //This will wait until the fadeOut is done before attempting to fadeIn.
            $that.next().fadeIn();
        });
    });
    $('.panel').click(function(){
        var $that = $(this);
        $(this).fadeOut(function(){
            $that.prev().fadeIn();
        });
    }); 

.

Там также, кажется, ошибка, в которой зависание не показывает текст на первом событии Hover.

jsfiddle: http://jsfiddle.net/mdjfe/