jquery - 使用带有 mysql 查询的 Handlbars JS 填充多张卡片，但只有 1 个按钮有效

Question

我已经在 handlebars js 中设置了一个模板来显示我的 mysql 查询中每个条目的信息。代码有效，我得到了预期的显示(16 个信息卡，带有一个应该显示更多信息的按钮)。

我遇到的问题是，每张返回的信息卡都有一个 div/按钮，单击该按钮时应该会显示该卡的更多信息。但是，只有第一个返回的信息卡上的第一个按钮有效。该按钮由 id 调用，当我更改为按类调用它时，它会显示所有正确的信息，但同时显示所有 16 张卡片。其他 15 个按钮均未按 ID 或类响应。

关于如何让所有 16 张卡片在单击相应按钮时分别使用react的任何建议？

<div class="force-block"> 
 {{#each taco }} 	//for each loop
  <div id="main-bio-block">
	<div class="performer-image"><img src="{{this.image}}" class="user-image">
	</div>
				<div class="info" id="info-modal">
                <p>Country: {{this.country}}</p>
				<p>Earnings: {{earnings}}</p>
				<p>Wins: {{wins}}  Losses: {{loss}}</p>
				<p>Titles: {{titles}}  Gold: {{gold}} </p>
				<p>Silver: {{silver}}  Bronze: {{bronze}}</p>
				</div>
			      <div id="user-name"><p>{{this.handle}}</p></div>
     //this is the button in question
                    <div class="modal-btn" id="bio-modal">
                      <p>Bio Info</p>
                    </div>
		            <div class="modal-btn" id="accolades-modal">
                      <p>Accolades</p>
                    </div>
//below is the modal hidden until bio-modal is clicked.
		<div class="many" id="info-1">
			<span class="close">&times;</span>
				<div class="info-content">
					<p>{{bio}}</p>
				</div>
		</div>

		</div>
{{/each}}		

</div>


<script type="text/javascript">
		$('#bio-modal').click(function(){
			$('#info-1').show();
		});

		$('.close').click(function(){
			$('#info-1').hide();
		});

		
	</script>

Answer 1

据我所知，您在循环中多次使用相同的 id :

<div id="main-bio-block">

<div class="modal-btn" id="bio-modal">

<div class="many" id="info-1">

您的 ID 应该是唯一的，这样它们就不会在您的页面中出现多次。

在您的情况下，您将获得循环中使用的每个 id 的 16 倍。 取而代之的是，您可以使用循环的索引号来生成类似这样的独特内容

<div class="many" id="info-{{@index}}">

你的生物模式按钮也是一样的:

<div class="modal-btn" onclick="toggleinfo('info-{{@index}}')">
   <p>Bio Info</p>
</div>

完成此操作后，您只需要一个像这样的 toggleinfo 函数:

<script type="text/javascript">
        function toggleinfo(id){
            $(id).toggle();
        }
</script>