Нажатие кнопки во фляге - PullRequest
Новая
       9

Нажатие кнопки во фляге

0 голосов
/ 30 апреля 2018

Я использую колбу для своего приложения, и я хочу, чтобы div отображался, когда пользователь нажимает на одну из выбранных кнопок. Хотя это работает для каждой кнопки, «функция симпатии» работает только для div в первой кнопке. Существует незаполненный фавикон, который я заменяю на заполненный, когда пользователь нажимает на сердце. Тем не менее, это работает только для первого div, а не для остальных, и я не могу понять, почему. 

function like(status) {
  console.log("here");
  if (status == 'True') {
    console.log(status);
    document.getElementById('nofill').style.display = "none";
    document.getElementById('fill').style.display = "inline-block";
  } else if (status == 'False') {
    console.log(status);
    document.getElementById('fill').style.display = "none";
    document.getElementById('nofill').style.display = "inline-block";
  }
}

function showInfo(tag, button_id) {
  console.log("Got to the actions.js file");
  console.log(button_id);
  var selected_tag_div = document.getElementById(tag);
  var button = document.getElementById(button_id);
  if (selected_tag_div.style.display === "none") {
    selected_tag_div.style.display = "block";
    selected_tag_div.style.textAlign = "left";
    // selected_tag_div.style.backgroundColor = "#5BC0DE";
    button.style.opacity = .7;
    selected_tag_div.style.height = "100px";
  } else {
    selected_tag_div.style.display = "none";
    button.style.backgroundColor = "#5BC0DE";
    button.style.opacity = 1;
  }
}
{% if output %}
<p class="section-title">Top #'s to use</p>
<div class="output-container text-center">
  {% for tag in output %} {% set button_id = tag[1:] + "-btn" %}
  <button type="button" onclick="showInfo('{{tag[1:]}}', '{{button_id}}')" id={{button_id}} class="btn btn-info tag_buttons">{{tag}}
                                </button>
  <div class="selected-container row" id={{tag[1:]}} style="display: none">
    <div class="col-sm-12">
      <div class="like-button">
        <span style="float: right;" onclick="like('True')"><i id='nofill' class="far fa-heart" style="color: #000000; font-size:1.5em; display: inline-block"></i></span>
        <span style="float: right;" onclick="like('False')"><i id='fill' class="fas fa-heart" style="color: #FF0000; font-size:1.5em;"></i></span>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}

1 Ответ

0 голосов
/ 30 апреля 2018

Атрибут идентификатора HTML-тега должен быть уникальным, поэтому у вас не должно быть элементов с одинаковым идентификатором в DOM. 

<span style="float: right;" onclick="like('True')"><i id='nofill' class="far fa-heart" style="color: #000000; font-size:1.5em; display: inline-block"></i></span>
<span style="float: right;" onclick="like('False')"><i id='fill' class="fas fa-heart" style="color: #FF0000; font-size:1.5em;"></i></span>

Один из вариантов - использовать class attribute вместо id: 

<span style="float: right;" onclick="like('True')"><i class='nofill' class="far fa-heart" style="color: #000000; font-size:1.5em; display: inline-block"></i></span>
<span style="float: right;" onclick="like('False')"><i class='fill' class="fas fa-heart" style="color: #FF0000; font-size:1.5em;"></i></span>

Также посмотрите, как использовать это ключевое слово и узнайте больше о событиях JS .

...