выбрать несколько кнопок выбора двух кнопок (кнопки между двумя кнопками должны быть выбраны)

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 в вышеприведенном случае все а1, b2, c3, d4, e5, f6 выбираются автоматически

Answer 1

Вам следует применять рядок к ряду сидений, поэтому, когда пользователь нажимает на любые два сиденья, и если оба они совпадают, тогда он должен выбирать все места между их

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

Что-то, как это должно работать. Вы получаете щелчок index, прокрутите места, и если щелчок index больше текущего index, вы запустите функцию addSeat(). Я добавил jQuery, чтобы облегчить жизнь.

var clickedIndex = $(".seat").index(this); 
$('.seat').each(function(index){ 
    if(!$(this).hasClass('selected') && clickedIndex > index){ 
     addSeat($('#seats'), $(this).val()); 
    }    
}); 

Answer 4

Я сделал прототип. Логики могут быть сделаны вокруг него.

Я использовал nextUntil в качестве некоторых из приведенных выше ответов.

Добавлен DIV с классом .row

$(".row").find('.a1.selected').nextUntil(".selected").css({"color": "red", "border": "2px solid red"}); 

Fiddle demo

Answer 5

я ве сделал чистый 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

надеюсь, что это поможет :)

Answer 6

Я внес некоторые изменения в ваш код ... Я думаю, что это может быть хорошим началом.

Я добавил эту функцию:

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/

Надеется, что это помогает вам