Почему я не могу правильно перебрать элементы руля?

Question

Я пишу код интерфейса для веб-сайта, используя jQuery, AJAX и Handlebars.js. У меня есть файлы HTML, CSS и script.js. Я довольно новичок в Javascript и методах. Это первый раз, когда я использую Handlebars в своем коде.

Я использовал разбор JSON для анализа всей информации, представленной в URL. Это

что-то вроде

{"products": 
[{"id": 0, 
   "name": "Ocean Blue Shirt",
   "description": "<p>Ocean blue cotton shirt with a narrow collar and 
                      buttons down the front and long sleeves. Comfortable 
                      fit and tiled kalidoscope patterns. </p>", 
   "category": "men", 
   "image_url": "https://burst.shopifycdn.com/photos/young-man-in-bright- 
                 fashion_925x.jpg", 
   "unit_cost": 92.95, 
   "inventory": 0},  

 {"id": 1, 
  "name": "Classic Varsity Top",
  "description": "<p>Womens casual ......}
  ..
  ..
  ]}

Я создал кнопки и использовал {{name}} для создания нескольких кнопок с повторяющимися именами. Моя цель - сделать так, чтобы каждая кнопка содержала соответствующий {{description}} в «модальном» виде, когда я нажимаю на них.

Мне удалось получить одну первую кнопку (названную с помощью {{name}}), отображающую ее описание, начиная с «Ocean blue cott .....», когда я нажимаю на нее, однако я не могу чтобы получить что-нибудь, если я нажму на любую другую кнопку (с другими {{name}} s.

Пожалуйста, посмотрите на код и помогите мне понять, что не так, спасибо!

script.js

    var myRequest = new XMLHttpRequest()
    myRequest.open('GET' , 'http://127.0.0.1:8010/products' )
    myRequest.onload = function() {

            var myData = JSON.parse(myRequest.responseText)

            createHTML(myData)

                // Get the modal
                var modal = document.getElementById("myModal")
                // Get the button that opens the modal
                var btn = document.getElementById("myBtn")

                // Get the <span> element that closes the modal
                var span = document.getElementsByClassName("close")[0]

                // When the user clicks on the button, open the modal

                btn.onclick = function() {
                 modal.style.display = "block"
                }

                // When the user clicks on <span> (x), close the modal
                span.onclick = function() {
                  modal.style.display = "none"
                }


    }
            myRequest.send()

            function createHTML(data) {

            var template = document.getElementById("prodTemp").innerHTML
            var compiledTemplate = Handlebars.compile(template)
            var genHTML = compiledTemplate(data)

            var prodContainer = document.getElementById("prod-container")
            prodContainer.innerHTML = genHTML

    }

index.html

   {{#each products}}

                                <tr>

                                    <td>

                                        <!-- Trigger/Open The Modal -->
                                        <button id="myBtn">{{name}}</button>


                                        <!-- The Modal -->
                                        <div class = "modal" id="myModal" >
                                          <!-- Modal content -->
                                          <div class="modal-content">
                                            <span class="close">&times;</span>
                                              <li  >Product Description: {{{description}}}</li>
                                          </div>
                                        </div>
                                    </td>
                                    <td>
                                        ${{unit_cost}}
                                    </td>
                                </tr>
                            {{/each}}

Answer 1

Причина в том, что вы используете один и тот же идентификатор для всех кнопок и модальных элементов, поэтому при выполнении действия bind действие document.getElementById() будет действовать только для первого.

Я создал codepen на основе вашего кода для решения. Пожалуйста, проверь это. Идея состоит в том, чтобы создать уникальный идентификатор для каждого из элементов. И отношение между ними при обработке событий основывается на их соответствующем индексе.

(function(window, document, $, undefined) {
  'use strict';
  
  var data,
      source,
      template;
  
  // Our data object
  data = {"products": 
[{
  "id": 0, 
   "name": "Ocean Blue Shirt",
   "description": "<p>Ocean blue cotton shirt with a narrow collar and buttons down the front and long sleeves. Comfortable fit and tiled kalidoscope patterns. </p>", 
   "category": "men", 
   "image_url": "https://burst.shopifycdn.com/photos/young-man-in-bright-fashion_925x.jpg", 
   "unit_cost": 92.95, 
   "inventory": 0
},  

 {"id": 1, 
  "name": "Classic Varsity Top",
  "description": "<p>Womens casual</p>",
  "category": "women", 
   "image_url": "https://burst.shopifycdn.com/photos/young-man-in-bright-fashion_925x.jpg", 
   "unit_cost": 80.00, 
   "inventory": 0}
 ]};
  
  // Get the template source
  source = $("#my-template").html();
	  
  // Compile the template into a Handlebars function
  template = Handlebars.compile(source);
	
  // Pass our data object to the compiled Handlebars function
  // Insert back into the page
	$('#welcome-message').html(template(data));
 //binding events for elements
  var $openEls = document.getElementsByClassName('open');
  for(var i =0 ; i< $openEls.length; i++){
    var $open = $openEls[i];
    $open.onclick = function(){
      var index = this.id.split('-')[1];
      // console.log('open index ', index)
      var modal = document.getElementById("myModal-"+index);
      modal.style.display = 'block';
    }
  } 
  
  var $closeEls = document.getElementsByClassName('close');
  for(var j =0 ; j< $closeEls.length; j++){
    var $close = $closeEls[j];
    $close.onclick = function(){
      var closeIndex = this.id.split('-')[1];
      // console.log('close index ', closeIndex)
      var modal = document.getElementById("myModal-"+closeIndex);
      modal.style.display = 'none'; 
    }
  }
})(window, document, jQuery);

<div id="welcome-message">
  <script id="my-template" type="text/x-handlebars-template">
    {{#each products}}

    <tr>

      <td>

        <!-- Trigger/Open The Modal -->
        <button id="myBtn-{{@index}}" class="open">{{name}}</button>

        <!-- The Modal -->
        <div class="modal" id="myModal-{{@index}}">
          <!-- Modal content -->
          <div class="modal-content">
            <span class="close" id="close-{{@index}}">&times;</span>
            <li>Product Description: {{{description}}}</li>
          </div>
        </div>
      </td>
      <td>
        ${{unit_cost}}
      </td>
    </tr>
    {{/each}}

  </script>
</div>

Вы могли бы, как это работает, как показано на рисунке

Answer 2

ID модального - это то, что запускает модальное.Если все модальные элементы имеют одинаковый идентификатор, кнопка не будет знать, кого вызвать.

{{#each products}}
<tr>
    <td>

        <!-- Trigger/Open The Modal -->
        <button data-toggle="modal" data-target="#{{id}}">{{name}}</button>


        <!-- The Modal -->
        <div class="modal" id="{{id}}" role="dialog">
            <!-- Modal content -->
            <div class="modal-content">
                <span class="close">&times;</span>
                <li>Product Description: {{{description}}}</li>
            </div>
        </div>
    </td>
    <td>
        ${{unit_cost}}
    </td>
</tr>
{{/each}}