Показывая одну категорию и прячутся двое, когда одну из трех кнопок нажата


Как я могу выполнить рефакторинг этого кода? Я знаю, что это тавтология, но я не уверен, как это исправить.

$(function() {
    $('#category-1-button a').bind('click', function() {
        $(this).css({opacity:'1'});
        $('#category-2-button a,#category-3-button a').css({opacity:'0.4'});
        $('#blog-headers').css({backgroundPosition: '0 0'});
        $('#category_2,#category_3').hide(0, function() {
            $('#category_1').show(0);
        });
    });
});

$(function() {
    $('#category-2-button a').bind('click', function() {
        $(this).css({opacity:'1'});
        $('#category-1-button a,#category-3-button a').css({opacity:'0.4'});
        $('#blog-headers').css({backgroundPosition: '0 -144px'});
        $('#category_1,#category_3').hide(0, function() {
            $('#category_2').show(0);
        });
    });
});

$(function() {
    $('#category-3-button a').bind('click', function() {
        $(this).css({opacity:'1'});
        $('#category-1-button a,#category-2-button a').css({opacity:'0.4'});
        $('#blog-headers').css({backgroundPosition: '0 -288px'});
        $('#category_1,#category_2').hide(0, function() {
            $('#category_3').show(0);
        });
    });
});


642
6
задан 10 июня 2011 в 01:06 Источник Поделиться
Комментарии
4 ответа

Следующий будет работать сразу. Я сделал следующее:


  1. Изменили привязку() в клик(), который является более точным.

  2. Всегда устанавливайте прозрачность всех соответствующих ссылок, кроме этого в 0, а затем установите текущую до 0,4.

  3. В сочетании всех функций при использовании , если заявление, которое сравнивает родителей. Есть небольшая потеря производительности по сравнению с тремя различными функциями.

Код:

$(function() {
$('#category-1-button a, #category-2-button a, #category-3-button a').click(function () {
$('#category-1-button a,#category-2-button a,#category-3-button a').not(this).css({opacity:'0.4'});
$(this).css({opacity:'1'});
var myParent = $(this).parent();
if (myParent == $('#category-1-button')) {
$('#blog-headers').css({backgroundPosition: '0 0'});
$('#category_3,#category_2').hide(0, function() {
$('#category_1').show(0);
});
} else if (myParent == $('#category-2-button')) {
$('#blog-headers').css({backgroundPosition: '0 -144px'});
$('#category_1,#category_3').hide(0, function() {
$('#category_2').show(0);
});
} else if (myParent == $('#category-3-button')) {
$('#blog-headers').css({backgroundPosition: '0 -288px'});
$('#category_1,#category_2').hide(0, function() {
$('#category_3').show(0);
});
}
});
}

Примечание: я одолжил .не(этот) от Патрик ДГ комментарий.

1
ответ дан 10 июня 2011 в 02:06 Источник Поделиться

Дайте каждому #категории-Н-кнопка класс как category_button.

Привязать обработчик в каждой()[дальше] метод, так что вы можете использовать индекс параметра для расчета фоновой позиции.

Используйте это , чтобы ссылаться на элемент, который получил событие в обработчик щелчка.

Используйте не()[дальше] метод, чтобы исключить этот элемент из категории кнопки для настройки непрозрачности.

Использовать фильтр()[дальше] способ показать категории элемент, который относится к индексу .каждый() + 1.

$(function() {
var categories = $('[id^="category_"]');
var category_buttons_a = $('.category_button a').each(function( idx ) {
$(this).bind('click', function() {
$(this).css({opacity:'1'});
category_buttons_a.not(this).css({opacity:'0.4'});
$('#blog-headers').css({backgroundPosition: '0 ' + (idx * -144) + 'px'});
categories.hide().filter( '#category_' + (idx + 1) ).show();
});
});
});

14
ответ дан 10 июня 2011 в 02:06 Источник Поделиться

Я думаю, что я покрыл все основания с этим.

(function($){
"use strict";
var $categoryButtonLinks;

$categoryButtonLinks = $('#category-1-button a, #category-2-button a, #category-3-button a').click(clickCategoryButtonLink);

$categories = $('#category_1, #category_2, #category_3');

function clickCategoryButtonLink(e)
{
var $this, $category, index, offset;
$this = $(this).css('opacity', '1');
index = $categoryButtonLinks.index($this);
offset = -144 * index;
index += 1;
$category = $('#category_'+index);
$categoryButtonLinks.not($this).css('opacity', '0.4');
$('#blog-headers').css('background-position', '0 ' + offset + 'px' );
$categories.not($category).hide(0, function(){
$category.show(0);
});
}

})(jQuery);

1
ответ дан 10 июня 2011 в 02:06 Источник Поделиться

ответ Патрик ДГ-это большой (+1), но я хочу предложить альтернативу, а именно рефакторинг все динамичный дизайн в окрашенный стиль. В то время как он делает лист te стиль больше, особенно из-за "неоднократных" селекторы, у него есть (ИМХО очень важно) преимущество поставить все стили, где они принадлежат.

Если кнопки категории выглядят так:

<div id="class="category-1-button" class="category_button">
<a href="#Category_1">Category 1</a>
</div>

Обратите внимание на ссылку на категорию в рот. Если все сделано правильно, это также может иметь преимущество в том, что ссылки будут работать без JavaScript (не то, что кто-то заботится о том, что в наше время...)

И дать категории общий класс тоже (например, "категории").

УСБ

.category_button a {
opacity: 0.4;
}

.category {
display: none;
}

/* The following rules/selectors could/should be generated by a script */
.category_1_selected #category-1-button a,
.category_2_selected #category-2-button a,
.category_3_selected #category-3-button a {
opacity: 1;
}

.category_1_selected #category_1,
.category_2_selected #category_2,
.category_3_selected #category_3 {
display: block;
}

.category_1_selected #blog-headers {
background-position: 0 0;
}

.category_2_selected #blog-headers {
background-position: 0 -144px;
}

.category_3_selected #blog-headers {
background-position: 0 -288px;
}

В JavaScript

$(function() {
var category_buttons_a = $('.category_button a').click(function() {
// I'm putting the class on the body as an example, but any other element the
// surrounds the buttons, categorys and the blog header is fine.
$("body").removeClass().addClass(this.href.slice(1) + "_selected");
});
});


Одно замечание по поводу HTML-код ссылки: я это основываясь на том, как я предполагаю, что ваши ссылки выглядят и ИМХО это неправильно, чтобы сделать так. А не лучше было бы поставить класс (и, если необходимо удостоверение личности) напрямую по ссылке, а не на его родительский элемент:

<div>
<a href="#Category_1" id="class="category-1-button" class="category_button">Category 1</a>
</div>

1
ответ дан 10 июня 2011 в 08:06 Источник Поделиться