Question

我正在尝试创建一个界面，您可以选择门票并购买它们，我希望当我点击座位时它显示为＆＃34;您目前正在购买下一张门票+（用户选择的门票））＆＃34;

到目前为止，这是我的代码：

＆＃13;

var seatsUnclicked = document.getElementsByClassName("seat-unique");
var seatsClicked = document.getElementsByClassName("seatClicked");
var images = document.getElementsByTagName("IMG");
var seatsOutput = document.getElementsById("seatsOutput");
var ticketsData = 0
for (let i = 0; i < seatsUnclicked.length; i++) {
  seatsUnclicked[i].onmouseover = function() {
    this.src = "chairclicked.svg";
    this.onmouseout = function() {
      this.src = "chair.svg"
    }

    if ($(this).hasClass('seatClicked')) {
      this.src = "chairclicked.svg";
      this.onmouseout = function() {
        this.src = "chairclicked.svg"
      }
    }
  }

  seatsUnclicked[i].onclick = function() {
    this.classList.add("new")

    if ($(this).hasClass('seatClicked')) {
      this.classList.remove("seatClicked")
      this.classList.remove("new")
      this.src = "chair.svg";
      this.onmouseout = function() {
        this.src = "chair.svg"
      }
      ticketsData = ticketsData - /* "the id of this element in a string" */
    }

    if ($(this).hasClass('new')) {
      this.src = "chairclicked.svg";
      this.classList.add("seatClicked")
      this.classList.remove("new")
      this.onmouseout = function() {
        this.src = "chairclicked.svg"
      }
      ticketsData = ticketsData + /* "the ID of this element in a string" */
    }

    seatsOutput.innerHTML = "THE TICKETS YOU HAVE CHOSEN ARE" + string(ticketsData)
  }
}

＆＃13;

<div class="seats-row-A">
  <img id="A1" class="seat-unique " src="http://via.placeholder.com/100x100?text=A1">
  <img id="A2" class="seat-unique " src="http://via.placeholder.com/100x100?text=A2">
  <img id="A3" class="seat-unique " src="http://via.placeholder.com/100x100?text=A3">
  <img id="A4" class="seat-unique " src="http://via.placeholder.com/100x100?text=A4">
  <img id="A5" class="seat-unique" src="http://via.placeholder.com/100x100?text=A5">
  <img id="A6" class="seat-unique " src="http://via.placeholder.com/100x100?text=A6">
  <img id="A7" class="seat-unique " src="http://via.placeholder.com/100x100?text=A7">
</div>
<h2 id="seatsOutput">Chosen Tickets:</h2>

＆＃13;

Answer 1

<德尔> jQuery的

<小时/> OP代码中唯一的jQuery语句是：$(this).hasClass('seatClicked')。

普通的JavaScript等价物是：this.classList.contains('seatClicked')。

<小时/>

问题

<小时/> 我无法遵循OP代码，因为只有一个类，一个id和img标签与JavaScript匹配，但由于* .svg文件（未提供），它不是很清楚。，有一个大括号}丢失（我认为它属于for循环，但我并没有浪费时间调试拼写错误。）

演示文稿是根据问题和评论提到的内容而构建的：

＆＃34; ...我希望当我点击一个座位时，它会显示为＆＃34;您正在购买...＆＃34;
悬停时突出显示图标。
悬停时显示图标的ID。

所有悬停行为均使用CSS完成：:hover，::before, ::after，content: attr(id), content: '\a0\1f4ba'。使用JavaScript进行CSS行为会导致更多的CPU周期。 CSS将使用显卡的GPU而不是CPU。

<小时/>

测试

通过在输入中输入数字并单击查看按钮，可以使用id="A*动态生成席位。对于按钮的每次额外点击，都会附加一批新的座位并且具有与其对应的ID：

input: 55 and first click A0-A55,
input: 12 and second click B0-B12,
input: 222 and third click C0-C222
...
Last group is J

<小时/>

参考

演示基本上是<form>。 HTMLFormControlsCollection API用于设置/获取 form controls 和值。

引用标记

const ui = document.forms.tickets;

这是表格＃tickets

中所有表单控件的集合

const t = ui.elements;

现在可以通过在表单控件的#id或[name]前加上HTMLFormControlsCollection对象来访问所有表单控件。

<textarea name='textA'></textarea>

没有HFCC API

var ta = document.querySelector('[name=textA]');

使用HFCC API

var ta = t.textA;

链接由 Links Collection 收集。

document.links

<小时/> DocumentFragment 用于高效，快速地一次性插入大量动态HTML。

document.createDocumentFragment();

<小时/> 使用了各种阵列方法：

演示

<小时/>

＆＃13;

const ui = document.forms.tickets;
const t = ui.elements;
const seats = document.getElementById('seats');

t.btn.addEventListener('click', seatsAvailable);

seats.addEventListener('click', function(e) {
  let picked = [];
  pickSeat(e, picked);
}, false);


function pickSeat(e, picked) {
  const display = t.display;
  if (e.target.tagName === "A") {
    e.target.classList.toggle('picked');
    picked = Array.from(document.querySelectorAll('.picked'));
  }
  picked = picked.map(function(seat, index, picked) {
    return seat.id;
  });
  display.value = "";
  display.value = picked;
}

function seatsAvailable(e) {
  const qty = this.previousElementSibling;
  const last = document.links[document.links.length - 1].id;
  console.log(last);
  const limit = parseInt(qty.value, 10) + 1;
  const spots = new Array(limit);
  spots.fill(0, 0, limit);
  return generateSeats(spots, last);
}

function generateSeats(spots, last) {
  if (last.charAt(0) === "J") {
    t.display.textContent += "Last row available";
    return false;
  }
  const rowID = ['x', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
  let row = rowID.indexOf(last.charAt(0)) + 1;

  const frag = document.createDocumentFragment();
  const avSeats = spots.map(function(A, idx) {
    const seat = document.createElement('a');
    seat.id = rowID[row] + idx;
    seat.href = "#/";
    frag.appendChild(seat);
    return seat;
  });
  seats.appendChild(frag);
  if (document.links[0].id === 'x') {
    const x = document.getElementById('x');
    x.parentElement.removeChild(x);
  }
  if (document.links.length > 114) {
    const ext = (Math.round(document.links.length / 114)*600)+600;
    seats.style.maxHeight = ext+'px';
  }
  return avSeats;
}

＆＃13;

html,
body {
  width: 100%;
  height: 10%;
  font: 400 16px/1.3 Consolas;
}

#seats {
  display: flex;
  flex-flow: column wrap;
  max-height: 600px;
  width: auto;
  border: 3px ridge grey;
}

.box {
  display: table
}

input,
button,
label {
  font: inherit
}

#qty {
  text-align: right
}

#display {
  display: table-cell;
}

.tag {
  overflow-x: scroll;
  overflow-y: hidden;
  display: block;
  width: 400px;
  line-height: 1.3
}

a,
a:link,
a:visited {
  display: inline-block;
  margin: 0;
  text-align: center;
  text-decoration: none;
  transition: all 500ms ease;
}

a:hover,
a:active {
  background: rgba(0, 0, 0, 0);
  color: #2468ac;
  box-shadow: 0 0 0 3px #2468ac;
}

a::before {
  content: attr(id);
  color: transparent;
}

a:hover::before {
  color: #2468ac;
}

a.picked::before {
  color: #000;
}

a::after {
  content: '\a0\1f4ba';
  font-size: 1.5rem;
}

#x {
  pointer-events: none
}

.as-console-wrapper {
  width: 30%;
  margin-left: 70%
}

＆＃13;

<form id='tickets'>

  <fieldset class='box'>
    <legend>Available Seats</legend>

    <fieldset class='box'>
      <input id='qty' type='number' min='0' max='50' value='1'> <button id='btn' type='button'>View</button>

      <label class='tag'>Current ticket purchases to seats: 
       <output id='display'></output>
     </label>

    </fieldset>

    <section id='seats'>
      <a id='x' href='#/'></a>
    </section>

  </fieldset>

</form>

＆＃13;

我想在类中显示单击项的ID，如果再次单击则删除它

1 个答案:

<德尔> jQuery的

问题

测试

参考

演示