Блог

Главная - Вопросы по программированию - Когда я считаю флажки, которые отмечены, он считается плюс один флажок

Когда я считаю флажки, которые отмечены, он считается плюс один флажок

#javascript #checkbox #frontend

#javascript #флажок #интерфейс

Вопрос:

Мое веб-приложение предназначено для прогнозирования спортивных игр. На моей странице показаны все матчи и очки, которые вы можете получить за каждый результат матча (Мадрид = 12 очков ПРОТИВ Барселоне = 15 очков). Таким образом, пользователь проверяет поле из совпадения и выбирает для него правильный результат. Я бы хотел, чтобы каждый раз, когда пользователь устанавливает флажок, показывать ему количество флажков, которые он проверил.

Вот мой Javascript для подсчета флажка :

     const updateCount = function() {
      var x = document.querySelectorAll(".square:checked").length;
      document.querySelector(".plus").innerHTML = x;
    };

Вот HTML-код, в котором будет отображаться количество отмеченных флажков

 <div class=" d-flex pt-2">
            <h3 class="typos">Matchs pronostiqués</h3>
            <h3 class="typos pts" style="font-weight: bold; padding-left: 5px;"><%= current_user.forecasts.where(confirmed: true, season_id: Season.last.id).count %>/50</h3>
            <span class="plus"></span>
          </div>

Вот мой Javascript, чтобы узнать, какую игру прогнозировал пользователь и какой результат он выбрал :

 const selectOutcome = () => {
  const selects = document.querySelectorAll(".square");
  selects.forEach((outcome)=>{
    outcome.addEventListener("click",(event) => {
  $('input[type="checkbox"]').on('change', function() {
   $(this).siblings('input[type="checkbox"]').not(this).prop('checked', false);
});
      const result = event.currentTarget.dataset.outcome;
      console.log(result);
      const id = event.currentTarget.parentNode.dataset.id;
      console.log(id);
      const box = event.currentTarget.checked;
      console.log(box);
      const url = 'store_outcome?result=' result 'amp;match=' id 'amp;box=' box
      fetch(url)
        .then(response => response.json())
        .then((data) => {
      console.log(data);
      });
    });
  });
}

const validePanier = () => {
  const panier = document.getElementById('panier');
  panier.addEventListener("click", (event) =>{
    console.log("click")
    const player = document.getElementById('season_player').value;
    fetch('confirm_pending?player=' player)
    .then(response => response.json())
    .then((data) => {
    console.log(data);
    });
  })
}

Вот мой HTML, для каждого совпадения, которое у меня есть в моей базе данных, совпадение будет отображаться впереди таким образом.

     <% @matches.each do |match| %>
          <% if Time.parse(match.kick_off) > Time.now amp;amp; current_user.forecasts.find_by(match_id: match.id, confirmed: true).nil? amp;amp; match.points_home.present? %>
          <% if match.sport == "football" %>
        <div class="d-flex justify-content-center mb-2 mt-2">
          <h4 class="typopo"><%= match.league %></h4>
        </div>
        <div class="d-flex justify-content-center mb-2 mt-2">
          <h3 class="tit"><%= DateTime.parse(match.kick_off).to_date%></h3><h3 class="typopo pl-2">-</h3>
          <h3 class="typopo pl-2"><%= match.kick_off.to_s.gsub("T", " ").split[1].gsub(" ", " ").split[0]%></h3>
        </div>
        <div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="<%= match.id %>">
          <div class="d-flex flex-column align-items-center col-4">
            <div class="row">
              <h3 class="typopo"><%= image_tag "#{match.team_home_logo_url}", width: 50 %></h3>
            </div>
            <div class="row text-align-center">
              <h3 class="tit"><%= match.team_home %></h3>
            </div>
          </div>
          <div class="d-flex flex-column justify-content-center">
            <p class="typopo text-center">VS</p>
            <div class="d-flex flex-row align-items-center col-4">
              <div class="displaysquares" data-id="<%= match.id %>">
                <input type="checkbox" class="square" onclick="updateCount()" data-outcome="1"></input>
                <input type="checkbox" class="square" onclick="updateCount()" data-outcome="NULL"></input>
                <input type="checkbox" class="square" onclick="updateCount()" data-outcome="2"></input>
              </div>
            </div>
          </div>

Существует идентификатор данных. Цель состоит в том, чтобы, когда пользователь устанавливает флажок, я могу получить идентификатор матча, чтобы создать правильный прогноз для правильной игры.

Комментарии:

1. Здравствуйте, проблема в этом идентификаторе данных, я не могу получить идентификатор совпадения, а затем создать прогноз.

2. У вас вообще нет упоминания data-id в вашем вопросе — какова актуальность?

3. Это было в HTML-коде « data-id=»<%= match.id %>»« Цель состоит в том, чтобы, когда пользователь устанавливает флажок, он связан с результатом специальной игры («1» — «NULL» — «2»). Итак, я получаю результат, который он выбирает для игры (у которого есть идея, которую я получаю из идентификатора данных).

4. Надеюсь, теперь это более понятно

5. Это совсем не ясно. Пожалуйста, нажмите редактировать, затем щелкните редактор [<>] фрагментов, а затем вставьте ОТОБРАЖАЕМЫЙ HTML-код, который имеет отношение к вопросу. Если у вас более одного совпадения, вставьте 2 или 3 совпадения. Также в опубликованном вами HTML-файле НЕТ НИЧЕГО с class=»pts».

Ответ №1:

Я бы делегировал вместо того, чтобы использовать встроенные обработчики событий

Здесь я СЧИТАЮ флажки — почему вам не нужно ЗНАЧЕНИЕ отмеченного РАДИО?

Обратите внимание, что я завернул все совпадения в <div id="matches">...</div> 

 document.getElementById("matches").addEventListener("change", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("square")) {
    const parent = tgt.closest(".displaysquares");
    var x = parent.querySelectorAll(".square:checked").length;
    document.querySelector(".plus").innerHTML  = parent.dataset.id   ": "   x  "<br/>" ;
  }
})  
 <span class="plus"></span>
<div id="matches">
  <div class="d-flex justify-content-center mb-2 mt-2">
    <h4 class="typopo">League 1</h4>
  </div>
  <div class="d-flex justify-content-center mb-2 mt-2">
    <h3 class="tit">
      Some date
    </h3>
    <h3 class="typopo pl-2">-</h3>
    <h3 class="typopo pl-2">Some string</h3>
  </div>
  <div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="MATCH 1">
    <div class="d-flex flex-column align-items-center col-4">
      <div class="row">
        <h3 class="typopo">TEAM LOGO </h3>
      </div>
      <div class="row text-align-center">
        <h3 class="tit">Some other team string</h3>
      </div>
    </div>
    <div class="d-flex flex-column justify-content-center">
      <p class="typopo text-center">VS</p>
      <div class="d-flex flex-row align-items-center col-4">
        <div class="displaysquares" data-id="MATCH 1">
          <input type="checkbox" class="square" data-outcome="1">
          <input type="checkbox" class="square" data-outcome="NULL">
          <input type="checkbox" class="square" data-outcome="2">
        </div>
      </div>
    </div>
  </div>

  <div class="d-flex justify-content-center mb-2 mt-2">
    <h4 class="typopo">League 2</h4>
  </div>
  <div class="d-flex justify-content-center mb-2 mt-2">
    <h3 class="tit">
      Some date
    </h3>
    <h3 class="typopo pl-2">-</h3>
    <h3 class="typopo pl-2">Some string</h3>
  </div>
  <div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="MATCH 2">
    <div class="d-flex flex-column align-items-center col-4">
      <div class="row">
        <h3 class="typopo">TEAM LOGO </h3>
      </div>
      <div class="row text-align-center">
        <h3 class="tit">Some other team string</h3>
      </div>
    </div>
    <div class="d-flex flex-column justify-content-center">
      <p class="typopo text-center">VS</p>
      <div class="d-flex flex-row align-items-center col-4">
        <div class="displaysquares" data-id="MATCH 2">
          <input type="checkbox" class="square" data-outcome="1">
          <input type="checkbox" class="square" data-outcome="NULL">
          <input type="checkbox" class="square" data-outcome="2">
        </div>
      </div>
    </div>
  </div>
</div>

Использование радиостанций вместо

 const matches = document.getElementById("matches")
matches.addEventListener("change", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("square")) {
    var x = [...matches.querySelectorAll(".square:checked")].map(chk => chk.closest(".displaysquares").dataset.id   ": " chk.dataset.outcome)
    document.querySelector(".plus").innerHTML = x.join("<br/>");
  }
})  
 <span class="plus"></span>
<div id="matches">
  <div class="d-flex justify-content-center mb-2 mt-2">
    <h4 class="typopo">League 1</h4>
  </div>
  <div class="d-flex justify-content-center mb-2 mt-2">
    <h3 class="tit">
      Some date
    </h3>
    <h3 class="typopo pl-2">-</h3>
    <h3 class="typopo pl-2">Some string</h3>
  </div>
  <div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="MATCH 1">
    <div class="d-flex flex-column align-items-center col-4">
      <div class="row">
        <h3 class="typopo">TEAM LOGO </h3>
      </div>
      <div class="row text-align-center">
        <h3 class="tit">Some other team string</h3>
      </div>
    </div>
    <div class="d-flex flex-column justify-content-center">
      <p class="typopo text-center">VS</p>
      <div class="d-flex flex-row align-items-center col-4">
        <div class="displaysquares" data-id="MATCH 1">
          <input type="radio" name="outcome1" class="square" data-outcome="1">
          <input type="radio" name="outcome1" class="square" data-outcome="NULL">
          <input type="radio" name="outcome1" class="square" data-outcome="2">
        </div>
      </div>
    </div>
  </div>

  <div class="d-flex justify-content-center mb-2 mt-2">
    <h4 class="typopo">League 2</h4>
  </div>
  <div class="d-flex justify-content-center mb-2 mt-2">
    <h3 class="tit">
      Some date
    </h3>
    <h3 class="typopo pl-2">-</h3>
    <h3 class="typopo pl-2">Some string</h3>
  </div>
  <div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="MATCH 2">
    <div class="d-flex flex-column align-items-center col-4">
      <div class="row">
        <h3 class="typopo">TEAM LOGO </h3>
      </div>
      <div class="row text-align-center">
        <h3 class="tit">Some other team string</h3>
      </div>
    </div>
    <div class="d-flex flex-column justify-content-center">
      <p class="typopo text-center">VS</p>
      <div class="d-flex flex-row align-items-center col-4">
        <div class="displaysquares" data-id="MATCH 2">
          <input type="radio" name="outcome2" class="square" data-outcome="1">
          <input type="radio" name="outcome2" class="square" data-outcome="NULL">
          <input type="radio" name="outcome2" class="square" data-outcome="2">
        </div>
      </div>
    </div>
  </div>
</div>

Комментарии:

1. К сожалению, я пробовал, он учитывается только для первой строки флажков, когда я проверяю флажки ниже (следующее совпадение), он не учитывает это. Я собираюсь отредактировать свой HTML-код, чтобы быть более понятным.

2. Я изменил в вашей первой версии «родительский» на «документ», и он работает нормально. Спасибо