Question

假设我们有以下代码：

Selected Seats
<input type="button" class="seat selected" value="a1">
<input type="button" class="seat selected" value="b2">
<input type="button" class="seat selected" value="c3">
<input type="button" class="seat" value="d4">
<input type="button" class="seat" value="e5">
<input type="button" class="seat" value="f6">

访问http://jsfiddle.net/victornpb/7j8vj/
在上述情况下选择a1和f6时，所有a1，b2，c3，d4，e5，f6都会自动选择

Answer 1

我对你的代码做了一些修改...... 我认为这可以是一个良好的开端。

我添加了这个功能：

function selectAll(seats) {
seats.forEach(function(seat) {
    seat.className = seat.className + ' selected';
});
}

它将所选类设置为数组中的所有元素

我将你的seatClick功能更改为：

function seatClick(seat) {
seat = (this instanceof HTMLInputElement ) ? this : seat;
var firstSelected;
var selectedSeats = [];
var thisInputHasAlreadyBeenSeen = false;
var confirmedSeats = [];
if (seat.classList.contains('reserved')==false) {

    if (seat.classList.toggle('selected')) {
        addSeat(document.getElementById('seats'), seat.value);
        $(".seat").each(function() {
            if(this != seat) {
            if(firstSelected == null && this.classList.contains('selected')) {
                firstSelected = this;
                selectedSeats.push(firstSelected);
                confirmedSeats = selectedSeats.slice();
            } else if (firstSelected) {
                if(this.classList.contains('selected')) {
                    selectedSeats.push(this);
                confirmedSeats = selectedSeats.slice();
                   }
                if(!this.classList.contains('reserved')) {
                selectedSeats.push(this);
                 }
            else{
                if(!thisInputHasAlreadyBeenSeen) {
                selectedSeats = [];
                firstSelected = null;
                } else {
                    return false;
                }
            }
            }
            } else {
                selectedSeats.push(this);
                confirmedSeats = selectedSeats.slice();
                if(firstSelected == null) {
                    thisInputHasAlreadyBeenSeen = true;
                    firstSelected = this;
                }
            }
        });
        if(confirmedSeats.length > 1) {
        selectAll(confirmedSeats);
        }
    } else {
        removeSeat(document.getElementById('seats'), seat.value);
    }

} else {
    alert("This seat is reserved!\nPlease select another seat");
    removeSeat(document.getElementById('seats'), seat.value);
    return;
}
}

基本上它的作用：

有两个阵列：一个用于临时座位（临时阵列）（有些可能在某些情况下未被选中），另一个用于将被选中的座位（实际数组< /强>）

它遍布你所有座位。

如果遇到空白座位，如果实际数组已经启动，则将其放入临时数组中。

如果它遇到“选定”座位，它可以启动实际数组，也可以通过在实际数组中复制它来确认临时数组数据。

如果遇到保留席位，则会停止循环...

jsfiddle示例：https://jsfiddle.net/7J8vj/94/

希望它可以帮到你

Answer 2

可能的解决方案应该是使用jQuery函数nextUntil()和add()：

var $first;
var $last;
var loop = false;

$('input.seat').click(function() {

    // Reset the seats if you select a new seat after a range was already defined
    if($first !== undefined  && $last !== undefined) {
        $first = undefined;
        $last = undefined;
        $('.seat').removeClass('selected');
        loop = false;
    }

    // Set first seat
    if($first === undefined) {
        $first = $(this);
        $first.addClass('selected');
    } else {
        // Set last seat
        if($last === undefined) {
            $last = $(this);
            loop = true;
        }
    }

    // Loop over all seats between first and last
    if(loop) {
        $('.seat').removeClass('selected');
        if(!$(this).hasClass('reserved'))
            $first.nextUntil($last,':not(.reserved)').andSelf().add($last).addClass('selected');
    }
});

这段代码的作用是选择第一个座位，然后将所有其他元素带到最后一个座位。但是最后一个座位也需要添加到您的列表中，因此您需要使用add()功能添加最后一个座位。

您仍需要进行一些检查，例如，如果此范围内已预留一个座位，则必须将其排除。

jsfiddle

中的简短示例

Answer 3

你应该将rowid应用到座位行，所以当用户点击任意两个座位时，如果两个座位都匹配，那么它应该选择它们之间的所有座位

Answer 4

这样的事情应该有效。您点击UITableViewController，循环访问座位，如果点击的index大于当前index，则运行index功能。我添加了jQuery以使生活更轻松。

addSeat()

Answer 5

我做了一些原型。可以在它周围制作逻辑。

我使用nextUntil作为上述一些答案。

添加了课程transient

的div

.row

<强> Fiddle demo

Answer 6

我制作了一个适合我的纯js解决方案。

添加以下3个功能：

function mapSeats(){
    return document.getElementsByClassName("seat");
}

function findIndex(object,value){
    for(i=0;i<object.length;i++){
        if(object[i].value==value)
            return i;
    }
    return null;
}

function isSelected(element){
    if ( (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" selected ") > -1 )
        return true;
    else
        return false;
}

这就是seatClick：

var start= end = -1;

//called everytime a seat is clicked
function seatClick() {

    if (this.classList.contains('reserved')==false) {


        if(start == -1)
            start = this.value;
        else if(end == -1)
            end = this.value;

        if(start != -1 && end != -1){

            seats = mapSeats();

            console.log(seats);

            indexS =  findIndex(seats,start);
            indexE = findIndex(seats,end);

            console.log(indexS,indexE);

            if(indexE >= indexS){
                for(i = indexS+1; i< indexE ; i++){
                    if (!isSelected(seats[i])) {

                        addSeat(document.getElementById('seats'), seats[i].value);
                        seats[i].classList.toggle('selected');
                    } else {

                        removeSeat(document.getElementById('seats'), seats[i].value);
                        seats[i].classList.toggle('selected');
                    }
                }
            }
            start = end =  -1; 
        }

        if (this.classList.toggle('selected')) {
            addSeat(document.getElementById('seats'), this.value);
        } else {
            removeSeat(document.getElementById('seats'), this.value);
        }

    } else {
        alert("This seat is reserved!\nPlease select another seat");
        removeSeat(document.getElementById('seats'), this.value);
        return;
    }
}

我的小提琴jsfiddle

希望这会有所帮助：）

选择两个按钮时选择多个按钮（必须选择两个按钮之间的按钮）

6 个答案: