Question

我有以下HTML代码：

<div class="big-bus-right-part" id="bis-bus-first-floor">               
  <div id="posB100" class="vehicle-seat" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)"></div>
  <div id="posB101" class="vehicle-seat" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)"></div>
  <div id="posB102" class="vehicle-seat" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)"></div>
  <div id="posB103" class="vehicle-seat" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)"></div>
  <div id="posB104" class="vehicle-seat" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)"></div>
  <div id="posB105" class="vehicle-seat" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)"></div>
  <div id="posB106" class="vehicle-seat selected" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)">1</div>
  <div id="posB107" class="vehicle-seat selected" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)">2</div>
</div>

我有以下JavaScript代码：

bc.vehicleSeatFirstFloorHandleEvent = function (el) {
  if ($(el).text().length > 0) {
      $(el).toggleClass('selected');    
  }

  var array = new Array();
  var frontSeats = new Array();
  var selectedSeats = $('#bis-bus-first-floor').find('.vehicle-seat.selected').html();
  console.log(selectedSeats);

  frontSeats.push(selectedSeats);
  console.log(frontSeats);
}

我想要做的是将所有具有选中类的值编入html（请参阅html中的值1和2）并将它们推入数组中。

Answer 1

你可以使用jQuery＆＃39; map和get来实现这一点：

var frontSeats = $('#bis-bus-first-floor')
                    .find('.vehicle-seat.selected')
                    .map(function() {
                        return $(this).html();
                    })
                    .get();

frontSeats将是一个包含"1"和"2"的数组。

示例：

＆＃13;

var bc = {};
bc.vehicleSeatFirstFloorHandleEvent = function (el) {
    if ($(el).text().length > 0) {
        $(el).toggleClass('selected');    
    }

    var frontSeats = $('#bis-bus-first-floor')
                        .find('.vehicle-seat.selected')
                        .map(function() {
                            return $(this).html();
                        })
                        .get();
    console.log(frontSeats);
};

＆＃13;

.vehicle-seat {
  display: inline-block;
  border: 1px solid #ddd;
  width: 1em;
  height: 1em;
}

＆＃13;

<div class="big-bus-right-part" id="bis-bus-first-floor">               
  <div id="posB100" class="vehicle-seat" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)"></div>
  <div id="posB101" class="vehicle-seat" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)"></div>
  <div id="posB102" class="vehicle-seat" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)"></div>
  <div id="posB103" class="vehicle-seat" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)"></div>
  <div id="posB104" class="vehicle-seat" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)"></div>
  <div id="posB105" class="vehicle-seat" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)"></div>
  <div id="posB106" class="vehicle-seat selected" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)">1</div>
  <div id="posB107" class="vehicle-seat selected" onclick="bc.vehicleSeatFirstFloorHandleEvent(this)">2</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

此外::

(function (el) {
  if ($(el).text().length > 0) {
      $(el).toggleClass('selected');    
  }

  var frontSeats = [] 
  var selectedSeats = $('.selected').each(function(){
    frontSeats.push($(this).html());
    })
  console.log(frontSeats);
})()

将值推送到数组

2 个答案: