Привет, текущий код, который у меня есть (но я не понимаю его первые 4 строки), находится ниже. Как я могу использовать JQuery в первых 4 строках вместо этого, если я должен использовать JQuery? Спасибо

let links = document.querySelectorAll('#list li')
links.forEach((el) => {
  el.addEventListener('click', (event) => {
    let numberOfChoices = event.target.innerText
    $('dropdownMenu').innerHTML = `${numberOfChoices}<span class="caret"></span>`

    if (numberOfChoices === "2") {
      $("#img3").addClass("invisible")
    }
    if (numberOfChoices === "3") {
      $("#img4).addClass("invisible");
      $("#img3).removeClass("invisible")
    }
    if (numberOfChoices === "4") {
      $("#img3").removeClass("invisible");
    }
    chosen = "yes"
  })
})

И HTML:

<div class="dropdown">
      <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        2
        <span class="caret"></span>
      </button>
      <ul id="list" class="parent dropdown-menu dropdown-info" aria-labelledby="dropdownMenu">
        <li class= "child"><a href="#">2</a></li>
        <li  class= "child"><a href="#">3</a></li>
        <li  class= "child"><a href="#">4</a></li>
      </ul>
0
user13656151 1 Сен 2020 в 22:20

2 ответа

Лучший ответ

Я разобью четыре строки, чтобы объяснить, что они делают и как конвертируют:

let links = document.querySelectorAll('#list li')

Это выбирает все элементы li внутри элемента со списком идентификаторов в переменную links.

links.forEach((el) => {

Прохождение каждого элемента li и передача их в цикл как el для каждого элемента в цикле.

el.addEventListener('click', (event) => {

Для каждого списка элементов, когда пользователь щелкает.

let numberOfChoices = event.target.innerText

Взяв текст каждого элемента (номер) и присвоив его переменной numberOfChoices

В jQuery

Эти четыре строки в jQuery можно преобразовать в:

$('#links li').each(function() {
  const $el = $(this);
  $el.click(function(e) {
    const numberOfChoices = $el.text();

С поломкой

$('#links li').each(function() {

Это делает то же самое, что и первые две строки в vanilla js, где я выбрал все элементы и перебирал их.

const $el = $(this);

Эта строка является необязательной, вы можете продолжать использовать $(this), но обратите внимание, что область действия this изменится, если у вас есть вложенные функции, поэтому лучше всего назначить ее переменной.

$el.click(function(e) {

Привязка щелчка к элементу.

const numberOfChoices = $el.text();

Сохранение текста элемента в переменной numberOfChoices.

$('#list li').each(function() {
  const $el = $(this);
  $el.click(function(e) {
    const numberOfChoices = $el.text();

    $('#dropdownMenu').html(`${numberOfChoices}<span class="caret"></span>`);

    if (numberOfChoices === "2") {
      $("#img3").addClass("invisible");
    }
    if (numberOfChoices === "3") {
      $("#img4").addClass("invisible");
      $("#img3").removeClass("invisible");
    }
    if (numberOfChoices === "4") {
      $("#img3").removeClass("invisible");
    }
    chosen = "yes";
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
      <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        2
        <span class="caret"></span>
      </button>
      <ul id="list" class="parent dropdown-menu dropdown-info" aria-labelledby="dropdownMenu">
        <li class= "child"><a href="#">2</a></li>
        <li  class= "child"><a href="#">3</a></li>
        <li  class= "child"><a href="#">4</a></li>
      </ul>
1
jerrylow 1 Сен 2020 в 20:56

В jQuery нет необходимости в вызове .each(), поскольку каждому выбранному элементу в любом случае будет назначено событие щелчка.

$('#list li').click(function(e) {
  const numberOfChoices =$(this).text(); 
  $('#dropdownMenu').html(numberOfChoices);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
      <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        2
        <span class="caret"></span>
      </button>
      <ul id="list" class="parent dropdown-menu dropdown-info" aria-labelledby="dropdownMenu">
        <li class= "child"><a href="#">2</a></li>
        <li  class= "child"><a href="#">3</a></li>
        <li  class= "child"><a href="#">4</a></li>
      </ul>
0
cars10m 1 Сен 2020 в 21:17