Question

我需要下一个＆amp; 之前的按钮，用于浏览复选框中选中的div。这意味着用户选择多个选项按开始按钮并在第一个选择的选项中执行某些操作，然后按下一步并导航到下一个div并再次执行一些操作。< / p>

＆＃13;

$(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');
                }
            }
        });
    });

});

＆＃13;

.room {
    display:none;
}

＆＃13;

<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>

＆＃13;

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数组---在桌面上放一些legos来代表被检查的房间，用三个圆圈代表三个数组 - 想象一下单击下一个/上一个按钮并将curr room lego从一个堆移到下一个堆中，您将很快找到如何执行此操作。）

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');
            }
        }
    });
});

翻转导航键div：输入中已检入

1 个答案: