Question

我创建了一个应用程序来选择HTML和JS中的席位，但我希望当我选择一个席位时，Id会显示在h3标记中，当您再次单击它时，该ID的文本将被删除

这是我的html的缩短版本，原版有更多的行和列：

＆＃13;

$(document).ready(function() {
  var seatsUnclicked = document.getElementsByClassName("seat-unique");
  var seatsClicked = document.getElementsByClassName("seatClicked");
  var images = document.getElementsByTagName("IMG");
  var seatsOutput = document.getElementById("seatsOutput");


  for (let i = 0; i < seatsUnclicked.length; i++) {

    seatsUnclicked[i].onclick = function() {

      this.classList.add("new")

      if ($(this).hasClass('seatClicked')) {

        //Code to remove the ID added goes here

        this.classList.remove("seatClicked")
        this.classList.remove("new")
        this.src = "chair.svg";

      }

      if ($(this).hasClass('new')) {
        seatsOutput.innerHTML += ' ' + this.id
        this.src = "chairclicked.svg";
        this.classList.add("seatClicked")
        this.classList.remove("new")

      }

    }
  }

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="seats-row-A">
  <img id="A1" class="seat-unique" src="chair.svg">
  <img id="A2" class="seat-unique " src="chair.svg">
  <img id="A3" class="seat-unique " src="chair.svg">
  <img id="A4" class="seat-unique " src="chair.svg">
  <img id="A5" class="seat-unique" src="chair.svg">
  <img id="A6" class="seat-unique " src="chair.svg">
  <img id="A7" class="seat-unique " src="chair.svg">
</div>
<h2>Seats chosen:<span id="seatsOutput"></span></h2>

＆＃13;

Answer 1

您需要获取span标记的文字并进行更新

像

这样的东西

var seats = seatsOutput.textContent.split(" ");

seats.splice(seats.indexOf(this.id),1);

seatsOutput.textContent = seats.join(" ")

var divs = document.getElementsByClassName("test");
var seat = document.getElementById("seats");
for(var i=0; i< divs.length; i++){
  divs[i].addEventListener("click",function(e){
    e.target.classList.toggle("red");
    
    if(!e.target.classList.contains('red')){
    var seats = seat.textContent.split(" ");

    seats.splice(seats.indexOf(this.id),1);

    seat.textContent = seats.join(" ")
    
    }else{
    
    seat.textContent+=' '+e.target.id;
    
    }
    

  })
}

.red{
  color: red;
}

#seats{

height: 30px;
border : solid 1px;

}

<div class="test" id="1">1</div>
<div class="test" id="2">2</div>
<div class="test" id="3">3</div>

<br/><br/>
<span id="seats"></span>

Answer 2

您可以扫描文档并在每次点击时重新打印：

＆＃13;

let isClicked = (seat) => (seat.classList.contains("seatClicked"));
let seatsOutput = document.getElementById("seatsOutput");
let printCurrentSeats = () => {
  seatsOutput.innerHTML = "";
  let seatsClicked = document.getElementsByClassName("seatClicked");
  for (let i = 0; i < seatsClicked.length; i++) {
    seatsOutput.innerHTML += " " + seatsClicked[i].id;
  }
};

$(document).ready(function() {
  let seats = document.getElementsByClassName("seat-unique");
  for (let i in seats) {
    seats[i].onclick = function() {
      if (isClicked(this)) {
        this.classList.remove("seatClicked");
        printCurrentSeats();
        this.src = "chair.svg";
      }
      else {
        this.classList.add("seatClicked");
        printCurrentSeats();
        this.src = "chairclicked.svg";
      }
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="seats-row-A">
  <img id="A1" class="seat-unique hola " src="chair.svg">
  <img id="A2" class="seat-unique " src="chair.svg">
  <img id="A3" class="seat-unique " src="chair.svg">
  <img id="A4" class="seat-unique " src="chair.svg">
  <img id="A5" class="seat-unique" src="chair.svg">
  <img id="A6" class="seat-unique " src="chair.svg">
  <img id="A7" class="seat-unique " src="chair.svg">
</div>
<h2>Tickets elegidos:<span id="seatsOutput"></span></h2>

＆＃13;

这是一个非常直接的解决方案，但是如果我有更多的座位（或者如果订单很重要）我会存储一个带有当前所选座位的JS阵列，所以我不需要去通过每次点击的所有HTML元素。

Answer 3

好吧，使用else if condition改进你的代码。

＆＃13;

if ($(this).hasClass('seatClicked')) {
  //Code to remove the ID added goes here
  this.classList.remove("seatClicked") this.classList.remove("new") this.src="chair.svg";
}

else if($(this).hasClass('new')) {
  seatsOutput.innerHTML+=' '+this.idthis.src="chairclicked.svg";
  this.classList.add("seatClicked") this.classList.remove("new")
}

else {
  this.classList.add("new")
}

＆＃13;

Answer 4

你使用jquery和纯javascript混合，这不是一个好习惯。选择其中一个。

$（this）.toggleClass（＆＃34; seatClicked＆＃34;）; 会将类切换为元素。

$（＆＃34; .seat-unique＆＃34;）。each（）函数迭代所有选定的元素。

$（this）.attr（＆＃39; id＆＃39;）为您提供所选元素的ID。

$（this）.on（＆＃39;点击＆＃39;，function（）{}）为您想要的元素添加事件。

看看这段代码。希望这可以帮助你

＆＃13;

$(document).ready(function() {
  $(".seat-unique").each(function() {
    $(this).on('click', function() {
      $(this).toggleClass("seatClicked");
      $("#seatsOutput").text($(this).attr('id'));
    });
  })

});

＆＃13;

.seatClicked {
  border: 1px solid #00ff00
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="seats-row-A">
  <img id="A1" class="seat-unique hola" src="chair.svg">
  <img id="A2" class="seat-unique " src="chair.svg">
  <img id="A3" class="seat-unique " src="chair.svg">
  <img id="A4" class="seat-unique " src="chair.svg">
  <img id="A5" class="seat-unique" src="chair.svg">
  <img id="A6" class="seat-unique " src="chair.svg">
  <img id="A7" class="seat-unique " src="chair.svg">
</div>
<h2>Tickets elegidos:<span id="seatsOutput"></span></h2>

＆＃13;

删除第二次单击时添加的ID名称

4 个答案: