问题描述
[已解决-我定义了两个使用不同ID的模式，但是当我禁用其中一个时，它可以按预期工作。对其进行了更改，以便所有内容都通过一种模式。在某个时候，我可能会重新访问以找出冲突的位置。]
我有一个mvc核心页面，在该页面上有一个使用部分视图的模式。在模式中，我想显示一个摘要列表，然后让用户单击列表中的一个项目以查看关于模式的其他详细信息。但是，当元素正在报告元素时，已对其进行了更改（通过警报检查），但未对其进行明显更新。然后，我创建了一个简单的测试，以更改div的背景颜色，以查看方法本身是否有效。
在这种情况下，警报会识别出颜色已更改，但同样，它在外观上也没有更改。所以问题是，如何使用js / jquery函数在模态对话框中动态更新文本或CSS？可能吗我对重新加载模式不感兴趣。
我的测试模式内容（_TestContentModal）：
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="closeMe"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div id="test">
background color test
</div>
<div>
<button onclick="UpdateDetails('yellow');">Change background to yellow</button>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" id="cancel" class="btn btn-default" type="button">Close</button>
</div>
</div>
<script>
function UpdateDetails(newColor) {
alert('Before change: ' + $('#test').css("background-color")); // Before change: rgba(0,0)
$('#test').css("background-color",newColor);
alert('After change: ' + $('#test').css("background-color")); // After change: rgba(255,255,0)
// clicking a second time confirms that the color was updated:
// Before change: rgba(255,0)
// After change: rgba(255,0)
}
</script>
正确地单击按钮会触发该功能，并且警报会显示/确认背景色已更改，但是背景色未显着更改。单击第二个按钮确认设置了新颜色。
我对模态还比较陌生，很可能我会以完全错误的方式进行操作。预先感谢您提供任何建议或解决方案。
编辑：
包括一些用于响应初始答案的其他代码。由于上述代码似乎可以在其他地方发挥作用，因此问题必须出在模式的处理上。
在父页面上是对模式的引用：
<partial name="_TestModal" />
这是_TestModal.cs的内容：
<!--Modal-->
<div aria-hidden="true" aria-labelledby="modal-test-label" role="dialog" tabindex="-1" id="modal-test" class="modal fade">
<div class="modal-dialog modal-lg">
</div>
</div>
父页面上的按钮可激活模式：
<div>
<a class="btn btn-secondary popup"
style="color: black;"
data-url='@Url.Action("GetTest","Runways")'
data-toggle="modal"
data-target="#modal-test">
Update<i class="fa fa-plus"></i>
</a>
</div>
控制器的GetTest操作返回包含顶部显示的模态内容的部分：
return PartialView("_TestContentModal");
最后，父页面具有用于处理模式的脚本：
(function ($) {
function Index() {
var $this = this;
function initialize() {
$(".popup").on('click',function (e) {
modelPopup(this);
});
function modelPopup(reff) {
var url = $(reff).data('url');
$.get(url).done(function (data) {
$('#modal-test').find(".modal-dialog").html(data);
$('#modal-test > .modal',data).modal("show");
});
}
}
$this.init = function () {
initialize();
};
}
$(function () {
var self = new Index();
self.init();
});
}(jQuery));
要清楚：颜色没有明显变化。浏览器控制台中未报告任何错误，因此添加了警报以查看元素的响应方式。减去警报后，Brando Zhang的答案表明了预期的行为，但是在我的情况下，无论有没有计时器延迟，它都不会变黄。同样，这些警报只是作为调试工具添加的。
解决方法
您是说要在警报更改后将测试背景色显示为黄色吗？
如果这是您的要求，建议您尝试使用setTimeout来不立即触发警报。
更多详细信息，您可以参考以下代码：
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="closeMe"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div id="test">
background color test
</div>
<div>
<button onclick="UpdateDetails('yellow');">Change background to yellow</button>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" id="cancel" class="btn btn-default" type="button">Close</button>
</div>
</div>
<script>
function UpdateDetails(newColor) {
alert('Before change: ' + $('#test').css("background-color")); // Before change: rgba(0,0)
$('#test').css("background-color",newColor);
setTimeout(function () { alert('After change: ' + $('#test').css("background-color")); },1)
// After change: rgba(255,255,0)
// clicking a second time confirms that the color was updated:
// Before change: rgba(255,0)
// After change: rgba(255,0)
}
</script>
结果：
