所以这对你来说很奇怪......
如下所示，我创建了一些代码，用于将内容注入模式（使用Bootstrap），该模式来自本地JSON对象，并且依赖于已单击的按钮。
然而，应该注射的内容没有被注射！尽管如此，我知道if语句在其中一个循环中遇到了条件，这要归功于我的console.log命令在这个地方点缀，特别是在循环和if函数中（在循环内）。
附加图片显示控制台日志和模态在工作。（红色书写在屏幕截图上合成，而不是在线;）{} {}}
继承人Javascript（navigation.js）：
$('#projectModal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget); // Define Button which triggered Modal
var inputTitle = button.data('title'); // Extract data-title attribute value
console.log(inputTitle);
// Generate JSON Database
var json = [{prTitle:"Forever Fitness Gibraltar", prDescription:"This description should be extremely long but I cannot be arsed to write much today. This description should be extremely long but I cannot be arsed to write much today. This description should be extremely long but I cannot be arsed to write much today.", prClient:"Tonu Osa", prWorkers:"Anton Brink, Paula Osa", prLocation:"Tallinn, Estonia", prDuration:"4 Weeks"},
{prTitle:"The Spy Program", prDescription:"This description should be extremely long but I cannot be arsed to write much today. This description should be extremely long but I cannot be arsed to write much today. This description should be extremely long but I cannot be arsed to write much today.", prClient:"Skye", prWorkers:"Anton Brink, Paula Osa", prLocation:"London, England", prDuration:"2 Weeks"},
{prTitle:"Leeds Fest", prDescription:"This description should be extremely long but I cannot be arsed to write much today. This description should be extremely long but I cannot be arsed to write much today. This description should be extremely long but I cannot be arsed to write much today.", prClient:"Leeds Dude", prWorkers:"Anton Brink, Paula Osa, Oliver Brink", prLocation:"Leeds, England", prDuration:"1 Week"}
];
// For Testing Purposes only, the loop is not currently declaring any values from the JSON database -.-
var description = 'This description should be extremely long but I cannot be arsed to write much today. This description should be extremely long but I cannot be arsed to write much today. This description should be extremely long but I cannot be arsed to write much today.';
var client = 'Skye';
var workers = 'Anton Brink, Paula Osa';
var location = 'London, England';
var duration = '2 Weeks';
// Loop to Find JSON data corresponding to data-title
$.each(json, function(n, v) {
console.log('In');
if(v.prTitle == inputTitle) {
console.log('Looping');
var description = v.prDescription;
var client = v.prClient;
var workers = v.prWorkers;
var location = v.prLocation;
var duration = v.prDuration;
return;
}
});
console.log(description);
console.log(client);
console.log(workers);
console.log(location);
console.log(duration);
var modal = $(this);
// Inject relevant JSON data into Modal Contents
modal.find('.modal-title').text(inputTitle); // Inject Title directly from inputTitle attribute
modal.find('#projectModalDescription').text(description);
modal.find('#projectModalDetailsClient').text(client);
modal.find('#projectModalDetailsWorkers').text(workers);
modal.find('#projectModalDetailsLocation').text(location);
modal.find('#projectModalDetailsDuration').text(duration);
});
以下是模态的HTML：
<div id="projectModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 id="exampleModalLabel" class="modal-title">Awesome Project!</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-9">
<p id="projectModalDescription">
Nothing in here yet, stupid JSON Object... WORK!
<br />
Signed,
<br />
Mech
</p>
</div><!-- .col-* -->
<div class="col-sm-3">
<h5 id="projectModalDetailsHeader">The Specs</h5>
<ul class="list-group">
<li class="list-group-item">
<h6 class="list-group-item-heading">Client</h6>
<p id="projectModalDetailsClient" class="list-group-item-text">Nothing</p>
</li>
<li class="list-group-item">
<h6 class="list-group-item-heading">Project Mates</h6>
<p id="projectModalDetailsWorkers" class="list-group-item-text">In</p>
</li>
<li class="list-group-item">
<h6 class="list-group-item-heading">Location</h6>
<p id="projectModalDetailsLocation" class="list-group-item-text">Here</p>
</li>
<li class="list-group-item">
<h6 class="list-group-item-heading">Duration</h6>
<p id="projectModalDetailsDuration" class="list-group-item-text">Yet -.-</p>
</li>
</ul>
</div><!-- .col-* -->
</div><!-- .row -->
</div><!-- .modal-body -->
</div><!-- .modal-content -->
</div><!-- .modal-dialog -->
</div><!-- #projectModal -->
对于按钮：
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#projectModal" data-title="Forever Fitness Gibraltar">Click me!</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#projectModal" data-title="The Spy Program">Click me!</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#projectModal" data-title="Leeds Fest">Click me!</button>
答案 0 :(得分：0)
如果没有看到您的数据结构，很难提供完整的解决方案。
然而，您的each循环并不正确。您在该循环中声明了无法在回调之外访问的局部变量。
此外，循环的每次迭代都会覆盖那些变量
var description = "Original";
$.each(json, function(n, v) {
// this is different variable than the one above
var description = "New Description";
});
console.log(description)// "Original"
使用上面循环中的变量（仍然只能得到最后一次迭代的值）
$.each(json, function(n, v) {
// this is same variable as above
description = "New Description";
});
console.log(description)// "New Description"
需要更多了解数据或循环原因以帮助更多