翻轉與導航鍵的div被：檢查在輸入

Question

我所需要的下一個 & 以前按鈕通過在複選框中選擇的div導航。這意味着用戶選擇幾個選項按開始按鈕，並在第一次選擇的選項中執行一些操作，然後他按下一步並導航到下一個div並再次執行一些操作。

$(document).ready(function() { 
 
    $('#roomsubmit').click(function() { 
 
     $(".room").hide(); 
 
     if ($("#node").is(':checked')) { 
 
      $("#hallway").show(); 
 
      $("#hallway").addClass("roomNew"); 
 
     } else if ($("#node-2").is(':checked')) { 
 
      $("#livingroom").show(); 
 
      $("#livingroom").addClass("roomNew"); 
 
     } else if ($("#node-3").is(':checked')) { 
 
      $("#bedroom").show(); 
 
      $("#bedroom").addClass("roomNew"); 
 
     } else if ($("#node-4").is(':checked')) { 
 
      $("#playroom").show(); 
 
      $("#playroom").addClass("roomNew"); 
 
     } 
 
    }); 
 

 

 
    $(function() { 
 
     $(".swap").on({ 
 
      click: function() { 
 
       var parent = $(this).closest('.roomNew'); 
 
       parent.css('display', 'none'); 
 
       if (this.id == 'previousBtn') { 
 
        parent.prev('.roomNew').css('display', 'block'); 
 
       } else { 
 
        parent.next('.roomNew').css('display', 'block'); 
 
       } 
 
      } 
 
     }); 
 
    }); 
 

 
});

.room { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<label for="node">Hallway 
 
    <input type="checkbox" id="node" /> 
 
</label> 
 
<label for="node-2">Livingroom 
 
    <input type="checkbox" id="node-2" /> 
 
</label> 
 
<label for="node-3">Bedroom 
 
    <input type="checkbox" id="node-3" /> 
 
</label> 
 
<label for="node-4">Playroom 
 
    <input type="checkbox" id="node-4" /> 
 
</label> 
 

 
<button id="roomsubmit">Start calculation</button> 
 

 
<div id="hallway" class="room">Works in hallway 
 
    <button class="swap previousBtn" id="previousBtn">prev</button> 
 
    <button class="swap nextBtn" id="nextBtn">next</button> 
 
</div> 
 
<div id="livingroom" class="room">Works in livingroom 
 
    <button class="swap previousBtn" id="previousBtn">prev</button> 
 
    <button class="swap nextBtn" id="nextBtn">next</button> 
 
</div> 
 
<div id="bedroom" class="room">Works in bedrrom 
 
    <button class="swap previousBtn" id="previousBtn">prev</button> 
 
    <button class="swap nextBtn" id="nextBtn">next</button> 
 
</div> 
 
<div id="playroom" class="room">Works in playroom 
 
    <button class="swap previousBtn" id="previousBtn">prev</button> 
 
    <button class="swap nextBtn" id="nextBtn">next</button> 
 
</div>

jsfiddle for the above code

Answer 1

我有東西給你，羅比。對不起延遲 - 必須解決。

jsFiddle Demo

首先，現在有兩個數組：arrRooms（其映射節點名的房間對象的數組），並newRooms（存儲勾選房間的陣列 - 名字不好，但哦）。

arrRooms數組用於在給定節點時獲取房間名稱。這消除了所有這些if-else行。

創建了一個新函數$('input:checkbox').click，用於添加/刪除newRooms數組中的選中/未選中的節點。這給你一個只包含檢查房間的數組。

接下來，#roomsubmit.click函數被簡化爲使用上述數組。 （1）抓住newRooms數組中的第一個項目（被選中的房間）（2）顯示該房間的DIV，以及（3）從newRooms數組中刪除該項目。這會創建一個「食堂板」場景，每次單擊#roomsubmit（「開始計算」按鈕）時，將顯示下一個檢查的房間。

重要提示：請注意，您有幾個具有相同ID的元素（id="nextBtn"和id="previousBtn"）。我不敢，恐怕。每個ID在DOM中必須完全唯一。但是，由於目前沒有在代碼中引用它們，因此不需要使用ID。 jQuery選擇器使用該類，因此只需從HTML中刪除ID屬性。順便說一句，爲了讓previous按鈕能夠工作，您可以修改交換功能以使用上述操作，或者完全改變您的方法，只需創建另一個空數組，並且當您從newRooms[]數組中刪除房間時，將其添加到prevRooms[]陣列中。點擊previous按鈕後，從prevRooms[]陣列中抓住顯示房間，將其從中刪除，然後將其粘貼回newRooms[]陣列。你會解決這個問題......（事實上，你可能需要三個變量：prevRooms數組，currRoom var和newRooms數組---在桌子上放置一些樂句來表示檢查的房間，並用三個圓圈表示三個陣列 - 想象一下下一個/上一個按鈕，並從一個樁移動CURR室樂高到下了，你會很快制定出如何做到這一點）

使用Javascript/jQuery代碼：

。

var tmp; 
var arrRooms={'node':'hallway','node-2':'livingroom','node-3':'bedroom','node-4':'playroom','node-5':'cabinet','node-6':'kitchen','node-7':'bathroom','node-8':'wc'}; 
var newRooms=[]; 

$('input:checkbox').click(function(){ 
    if ($(this).is(':checked')) { 
     newRooms.push(this.id); 
     //alert(JSON.stringify(newRooms)); 
    }else{ 
     newRooms.splice(newRooms.indexOf(this.id),1); //delete from newRooms 
     //alert(JSON.stringify(newRooms)); 
    } 
}); 

$('#roomsubmit').click(function() { 
    $(".room").hide(); 
    tmp = arrRooms[newRooms[0]]; 
    //alert('tmp = ' +tmp); 
    $('#' +tmp).addClass('roomNew').show(); 
    newRooms.splice(0,1); 
    //alert(JSON.stringify(newRooms)); 
}); 

$('.nextBtn').click(function(){ 
    $('#roomsubmit').click(); 
}); 


$(function() { 
    $(".swap").on({ 
     click: function() { 
      var parent = $(this).closest('.roomNew'); 
      parent.css('display', 'none'); 
      if (this.id == 'previousBtn') { 
       parent.prev('.roomNew').css('display', 'block'); 
      } else { 
       parent.next('.roomNew').css('display', 'block'); 
      } 
     } 
    }); 
});