为什么我不能通过车把元素正确地迭代? [英] Why can't i iterate correctly through handlebars elements?
问题描述
我正在使用jQuery和AJAX和Handlebars.js为网站编写前端代码. 我有HTML，CSS和script.js文件. 我对Javascript和技术非常陌生.这是我第一次在代码中使用把手.
I am writing a front-end code for a website using jQuery and AJAX and Handlebars.js. I have HTML,CSS and script.js files. I am pretty new to Javascript and techniques. This is the first time i'm using Handlebars in my code.
我使用JSON解析来解析URL中提供的全部数据.是
I used JSON parsing to parse through the entire data provided in a URL. It's
类似
something like
{"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}}.
I have created buttons and used {{name}} to create multiple buttons with iterated names. My objective is to make each button contain their respective {{description}} in a 'modal' view, when i click on them.
我已经能够实现第一个按钮(使用{{name}}命名)，当我单击该按钮时，其显示内容从海洋蓝棉....."开始，但是我无法如果我单击其他任何按钮(带有其他{{name}}的按钮)，都会得到任何东西.
I have been able to achieve one the first button ( named by using {{name}} ) displaying its description starting from 'Ocean blue cott.....' when i click on it, however, i am not able to get anything if i click any other buttons( with other {{name}}s.
请仔细查看代码，帮助我找出问题所在，谢谢！
Kindly look at the code and help me figure out what's wrong, thanks!
script.js
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
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">×</span>
<li >Product Description: {{{description}}}</li>
</div>
</div>
</td>
<td>
${{unit_cost}}
</td>
</tr>
{{/each}}
推荐答案
原因是您对所有按钮和模式元素使用相同的ID，因此在执行绑定操作时，document.getElementById()仅对第一个生效一个.
The reason is you are using the same id for all buttons and modal elements, so when executing bind the action, document.getElementById() will only take effect on the first one.
我根据您要解决的代码创建了 codepen .请检查一下.这个想法是为每个元素创建唯一的ID.它们在处理事件时的关系基于它们的相应索引.
I created this codepen base on your code for solving. Please check it. The idea is to create unique id for each of elements. And the relation between them when handling events bases on their corresponding index.
(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}}">×</span>
<li>Product Description: {{{description}}}</li>
</div>
</div>
</td>
<td>
${{unit_cost}}
</td>
</tr>
{{/each}}
</script>
</div>
您可以按照以下图片进行操作
You could how it works as following image
这篇关于为什么我不能通过车把元素正确地迭代?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
