使用导航键翻页会显示:已签入输入

Flipping with navigation keys divs that are :checked in input

本文关键字：输入 显示 导航      更新时间：2023-09-26

我需要下一个&上一个按钮，用于在复选框中选择的div中导航。这意味着用户选择了几个选项，按下start按钮并在第一个选择的选项中执行一些操作，然后按下next并导航到下一个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用于上面的代码

我有东西要给你，Roby。很抱歉耽误了-必须解决。

jsFiddle演示

首先，现在有两个数组：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，因为目前代码中没有引用ID。jQuery选择器使用类，所以只需从HTML中删除ID属性即可。

顺便说一句，要使previous按钮工作，您可以修改您的交换功能以使用上述功能，或者完全改变您的方法，只创建另一个空数组，当您从newRooms[]数组中删除房间时，将其添加到prevRooms[]数组中。单击previous按钮后，从prevRooms[]阵列中抓取要显示的房间，将其删除，然后将其粘贴回newRooms[]阵列中。你会解决的。。。（事实上，你可能需要三个变量：prevRooms数组、currRoom var和newRooms数组——在桌子上放一些lego来表示检查过的房间，并用三个圆圈来表示三个数组——想象一下点击next/prev按钮，将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');
            }
        }
    });
});
相关文章：