Показать/скрыть элементы в одной строке?

Я вызываю функцию с идентификатором. Этот идентификатор должен использоваться для .show() Элемент (ы), соответствующий селектору, и .hide() все это не так.Показать/скрыть элементы в одной строке?

function showAndHide(id){ 
    $('.container div').hide(); 
    $('.container div[data-id="'+id+'"]').show(); 
}

Есть ли более умный способ, чем это? Я хочу избежать записи части селектора дважды (.container div) и получить более четкую нотацию.

источник

2013-06-20 Marcel Otten

Я думаю, что этот способ просто отлично. – tymeJV

Если вы хотите сделать что-то «более холодное», вы должны попробовать другую Framework, jQuery имеет избыточный вес для этой цели. Но если у вас есть большая база кода в jQuery, это лучшее решение. –

Если вы хотите, вы должны переписать его в одной строке: $ ('. Container div'). Hide ('fast', function() {if ($ (this) .data ('id') == id) $ (this) .show();}); Но ваш код хороший. –

Вы можете использовать цепочки & filtering:

$('.container div').hide().filter('[data-id="'+id+'"]').show();

Первый селектор выбирает все дочерние дивы в .container, так скрыть действия по всем этим. Фильтр принимает подмножество первого набора на основе второго селектора (аналогично .find(), который действует на дочерние элементы). Таким образом, окончательный show() действует только на фильтрованный элемент.

источник

2013-06-20 14:45:47 MorganTiley

спасибо Моргану, это полезно! –

Вы считаете, что это ответ? :) – MorganTiley

Я буду! :) Просто нужно подождать еще 6 минут до тех пор, пока я не перейду через stackoverflow. –

Я думаю, что это должно сделать трюк.

$('.container div, .container div[data-id="'+id+'"]').toggle();

источник

2013-06-20 14:45:04 pethel

Не работает, если у вас есть более двух элементов. –

@ MarcelBöttcher Что значит? – pethel

-2

Что-то, как это может быть, что вы ищете:

function showAndHide(id){ 
    $('.container div').each(function() { 
     var t = $(this); 
     if(t.data("id") == id) { 
      t.show(); 
     } 
     else { 
      t.hide(); 
     } 
    } 
}

источник

2013-06-20 14:45:36 Jay

Он пытается сохранить это просто –

Насколько я понимаю, он не хотел '.show()' или '.hide() ', которые ему не нужны. – Jay

быстрее альтернативой использованию filter() является использование not():

$('.container div').not('[data-id="'+ id +'"]').hide();

Таким образом, вы никогда не имея на самом деле использовать show(), как вы никогда на самом деле скрывает это (меньше методов, улучшился скорость, отсутствие ненужного укрытия/показа).

jsPerf here - он намного быстрее во всех браузерах и удваивается так же быстро, как filter() в IE8/9.

источник

2013-06-20 14:46:50 lifetimes

Почему бы просто не выбрать только видимый? '$ ('. container div: visible'). hide()' –

@Bondye: visible is * very * slow. – lifetimes

http://jsfiddle.net/XhjNs/

function showAndHide(id){ 
$('.container div').not('[data-id="'+id+'"]').hide(); 

}

источник

2013-06-20 14:47:18 proggrock

Там вы много "путей", чтобы обновить вашу функцию.

Вы должны проверить это Test, сделанные с использованием console.profile(); и console.profileEnd(); действительно полезны методы Javascript (родной).

Решение, размещенное на @MorganTyle, похоже, является лучшим в плане вызова и производительности в целом, поэтому вы должны следовать за ним.

Вы можете нашел статью о профилировании Here

источник

2013-06-20 14:59:19

Здесь - http://jsperf.com/test102034, мой самый быстрый, как указано – lifetimes

Показать/скрыть элементы в одной строке?

ответ

Смежные вопросы