slideUp() все элементы, но не выбранные

Все, что я хочу сделать, это:slideUp() все элементы, но не выбранные

имеется 7 номеров и 7 дивы, они связаны друг с другом (пг 0 это в отношениях с DIV 0)
, когда один из номеров щелкают, он должен свернуть все другие дивы, которые не были выбраны
он может быть выбран более в одно время

Подводя итог, в основном, страница некоторые метки с номерами и 7 divs whic h отображаются по умолчанию (divs), но когда один или несколько из них выбираются щелчком по номерам, страница должна отображать только выбранные div.

Это то, что я пытаюсь сделать:

for(var i = 0; i <= 6; i++) {  
      if(i != (floors[i])) { 
       $("#lvl" + floors[i]).slideUp(); 
      } 
     }

Подробнее Код: http://jsfiddle.net/LSjg4/

источник

2013-08-23 Xmsss

может у объяснить больше Ват же именно у пытаются достичь? –

У меня есть 7 номеров (7 пролетов) и 7 разделов. Если я нажму на номер, я хочу, чтобы div, который относится к числу x, был показан (если это не так), и свернуть все остальные div, которые не выбраны. – Xmsss

так точно напротив ват сейчас? –

Я исправил несколько вещей в вашем коде. Ниже приведен рабочий код и ссылка на него в jsfiddle.

Было несоответствие типа данных (сравнение строки и int). При сопоставлении того, существует ли он в массиве этажей, код проверял полы [i] только тогда, когда я мог быть любой позицией на полах.

var floors = []; 
$(".nr").click(function() { 
     var state = $(this).data('state'); 
     state = !state; 

     if (state) { 
      $(this).css("background-color", "#1b7664"); 
      $(this).css("border-color", "#236959"); 
      floors.push(parseInt($(this).text())); 
      console.log(floors); 

      for(var i = 0; i <= 6; i++) { 
       ret = $.inArray(i, floors); 
       if(ret==-1) { 
        $("#lvl" + i).slideUp(); 
       } 
       else { 
        $("#lvl" + i).slideDown(); 
       } 
      } 

     } else { 
      $(this).css("background-color", "#02c099"); 
      $(this).css("border-color", "#13a480"); 
      for (var i = 0; i < floors.length; i++) { 
       if (floors[i] == parseInt($(this).text())) 
        floors.splice(i, 1); 
      } 
      for(var i = 0; i <= 6; i++) { 
       ret = $.inArray(i, floors); 
       if(ret==-1) { 
        $("#lvl" + i).slideUp(); 
       } 
       else { 
        $("#lvl" + i).slideDown(); 
       } 
      } 

     } 
     $(this).data('state', state); 
    });

Demo Здесь: http://jsfiddle.net/bFe9T/

источник

2013-08-23 09:06:19 rakeshjain

Это на самом деле то, что я искал, спасибо! – Xmsss

@Xmsss вы проверили мой ответ, он обеспечивает ту же функциональность с намного меньшим количеством кода –

Попробуйте

$(".nr").click(function() { 
    //alert($(this).attr("data-select")); 
    if($(this).attr("data-select") === "1") { 
     $(this).attr("data-select","0"); 
    } else { 
     $(this).attr("data-select","1"); 
    } 

    $(".nr").each(function(){ 
     if($(this).attr("data-select") === "1") { 
      var id = $(this).text(); 
      $("div#lvl"+id).slideDown(); 
     } else { 
      var id1 = $(this).text(); 
      $("div#lvl"+id1).slideUp(); 
     } 
    }); 
});

FIDDLE

источник

2013-08-23 07:27:08

Я считаю, что это вы ищете:

$(".nr").click(function() { 
    $(this).toggleClass('selected'); 
    $('.nr').each(function(){ 
     var $target = $('#lvl'+$(this).text()); 
     if($(this).is('.selected')) 
      $target.slideDown(); 
     else 
      $target.slideUp(); 
    }); 
});

Обратите внимание, что вместо изменения свойств CSS Я создал класс для выбранных элементов

Demo fiddle

источник

2013-08-23 07:28:39

Попробуйте

var floors = []; 

var $lvls = $('.lvl'), $nrs = $(".nr"); 
$nrs.click(function() { 
    var $nr = $(this), index = $nrs.index($nr), $lvl = $lvls.eq(index); 

    $lvl.add($nr).toggleClass('active'); 

    if($nr.hasClass('active')){ 
     $lvls.not('.active').slideUp(); 
     $lvl.slideDown(); 

     $nr.css("background-color", "#1b7664"); 
     $nr.css("border-color", "#236959"); 
     floors.push(($nr).text()); 
    } else { 
     $nr.css("background-color", "#02c099"); 
     $nr.css("border-color", "#13a480"); 

     if($nrs.filter('.active').length == 0){ 
      $lvls.slideDown(); 
     } else { 
      $lvls.not('.active').slideUp(); 
     } 
     var text = $nr.text(); 
     floors.splice($.inArray(text, floors), 1); 
    } 

    console.log('floors', JSON.stringify(floors)) 
});

Демо: Fiddle

источник

2013-08-23 07:30:59

Это хороший ответ, но после отмены выбора элементов он должен снова показать их все (все divs, принадлежащие номерам). – Xmsss

@Xmsss после отмены выбора всех элементов? –

@Xmsss после обновления номера следует обновить http://jsfiddle.net/arunpjohny/CT2Gh/2 –

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>slideUp demo</title> 
    <style> 
     .norm { background:#cccccc; margin:3px; width:80px;height:40px; float:left;color:#000000 } 
     .faded { background:#ffffff; margin:3px; width:80px;height:40px; float:left;color:#ffffff } 
     .btn{width:80px;} 
    </style> 
    <script src="http://code.jquery.com/jquery-1.8.1.js"></script> 
</head> 
<body> 
    <button class="btn" onClick="show(1)">1</button> 
    <button class="btn" onClick="show(2)">2</button> 
    <button class="btn" onClick="show(3)">3</button> 
    <button class="btn" onClick="show(4)">4</button> 
    <button class="btn" onClick="reset()">Reset</button> 
    <div class="norm" id="slide1">1</div> 
    <div class="norm" id="slide2">2</div> 
    <div class="norm" id="slide3">3</div> 
    <div class="norm" id="slide4">4</div> 

    <div></div> 
<script> 
    var save = new Array(); 
    function show(indx){ 
     if($.inArray(indx, save)==-1){ 
      save.push(indx); 
      for(var i=0;i<5;i++){ 
       if($.inArray(i, save)==-1){ 
        $('#slide'+i).attr('class','faded'); 
       } 
       else{ 
        $('#slide'+i).attr('class','norm'); 
       } 
      } 
     } 
    } 
    function reset(){ 
    save = new Array(); 
    for(var i=0;i<5;i++){  
     $('#slide'+i).attr('class','norm'); 
    } 
    } 
    </script> 
</body> 
</html>

источник

2013-08-23 07:45:54

slideUp() все элементы, но не выбранные

ответ

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