如何从function取回JavaScript中的多个值

Question

提前致谢

我想知道我怎样才能从代码块中获取很多值..我不知道我是否必须使用数组或任何东西...我是 js 的新手

考虑 html 代码

 <div class="row">
            
            <div class=" available seat" data="C-08" ></div>
            <label>C-08</label>

            <div class=" available seat" data="D-08"></div>
            <label>D-08</label>

            <div class=" available seat" data="E-08"></div>
            <label >E-08</label>

            
        </div>

我需要得到每个座位的后排座位号，比如......E08 FO8 ETC

我所做的是

 let selectedSeats=document.querySelectorAll('.row .seat.available'); 
   let seatNumber=[]
   selectedSeats.forEach((sts)=>{
          seatNumbers=[sts.nextElementSibling.innerText];
     });
console.log(seatNumbers);

我只得到日志中的最后一个座位号

任何人请告诉我我怎样才能得到所有的座位号

Answer 1

每次迭代时，您的 forLoop 都会被覆盖。

您应该尝试使用 push() 方法，如下所示：

let selectedSeats = document.querySelectorAll(".row .seat.available");
let seatNumber = [];
selectedSeats.forEach((sts) => {
  seatNumber.push(sts.nextElementSibling.innerText);
});
console.log(JSON.stringify(seatNumber));

带有已解析 JSON 的控制台日志结果如下：

["C-08","D-08","E-08"]

Answer 2

您可以使用 javascript 中的 map 返回一个数组。 例子

const seatNumbers = selectedSeats.map(sts => sts.nextElementSibling.innerText);

这将以所选座位的相同顺序返回所有座位号。

Answer 3

您应该使用push而不是分配给新数组

 let selectedSeats = document.querySelectorAll('.row.seat.available'); let seatNumbers = [] selectedSeats.forEach((sts) => { seatNumbers.push(sts.nextElementSibling.innerText); }); console.log(seatNumbers);

 <div class="row"> <div class=" available seat" data="C-08"></div> <label>C-08</label> <div class=" available seat" data="D-08"></div> <label>D-08</label> <div class=" available seat" data="E-08"></div> <label>E-08</label> </div>

Answer 4

使用Array#Push将文本推送到您的seatNumber数组 []。

此外，我不会使用nextElementSibling ，而是建议使用更feasible且易于使用的新数据属性。

使用数据属性将确保您从div中获取所需的准确数据，而不是从label中获取不需要的空格等

编辑：由于您突出显示您只想推送唯一值并避免重复，因此您可以使用IndexOf()检查数组是否包含现有座位号。 它只会唯一唯一的座位号。

现场演示：

 let selectedSeats = document.querySelectorAll('.row.seat.available'); let seatNumber = [] selectedSeats.forEach((sts) => { let seats = sts.getAttribute('data') //get seat number if (seatNumber.indexOf(seats) === -1) { seatNumber.push(seats); //only push unique seats in to the array } }); console.log(seatNumber);

 <div class="row"> <div class="available seat" data="C-08"></div> <label>C-08</label> <div class="available seat" data="A-02"></div> <label>A-02 - duplicate</label> <div class="available seat" data="D-08"></div> <label>D-08</label> <div class="available seat" data="A-02"></div> <label>A-02 - </label> <div class="available seat" data="E-08"></div> <label>E-08</label> <div class="available seat" data="E-08"></div> <label>E-08 duplicate</label> </div>