Селекторы Jquery для префиксов имен в подразделении

Question

В моем HTML-коде у меня есть кнопки 1, 2, 3 и 4 для 4 разных представлений.У меня есть несколько div'ов, названных как:

sheet(button id)+some string

Так что всякий раз, когда я нажимаю кнопку 2, я хочу, чтобы все деления с id=sheet2abc, id=sheet2xyz и т. Д. Стали видимыми и для остальных (т. Е. 1, 3 и 4) свойство dispaly:none должно быть установлено так же, как для sheet1abc, sheet3abc и т. Д.

Как это сделать с помощью селекторов jQuery?

Answer 1

ПОЦЕЛУЙ. По существу:

$('[id^=sheet]').hide();
$('[id^=sheet'+num+']').show(); // num is a relevant value, see the example

Рабочий пример: http://jsfiddle.net/j4TzA/

Answer 2

Я думаю, вы хотите использовать подстановочные знаки в селекторах jQuery.

Это показывает каждый div, чей id начинается с "sheet1":

$('div[id^=sheet1]').each(function() {
    $(this).show();
});

И это скрывает остальные:

$('div[id^=sheet]:not([id^=sheet1])').each(function() {
    $(this).hide();
});

Я создал скрипку, чтобы продемонстрировать, что .

Answer 3

Вы можете фильтровать как:

$('button').click(function() {
    var $button = $(this);
    $('div[id^=sheet]').each(function() {
        if((new RegExp("^sheet" + $button.data('id') + ".*$")).test($(this).attr('id'))) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
});

Тогда используйте такие кнопки кода:

<button data-id="1">1</button>

Answer 4

Кнопки: <a href="1" class="button">button 1</a> и т. Д.

Листы: <div id="sheet1" class="sheet">sheet 1</div> и т. Д.

jQuery:

$('.button').click(function(event){

    event.preventDefault();

    $('.sheet').hide();
    $('#sheet'+$(this).attr('href')).show();

}

В следующий раз проясните свой вопрос.