Javascript 动态设置 Bootstrap 3 模态标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27489179/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting a Bootstrap 3 modal title dynamically
提问by sagesky36
I have the same modal dialog for three different buttons.
我有三个不同按钮的相同模式对话框。
However, depending upon which button is clicked, I need to dynamically set the titleof the modal dialog.
但是，根据单击的按钮，我需要动态设置模态对话框的标题。
I thought this would be simple setting the title in the appropriate javascript function using jQuery. However, when debugging, I can see the title is set accordingly in the code, but after the modal is displayed, the modal title is blank.
我认为这将是使用 jQuery 在适当的 javascript 函数中设置标题的简单方法。但是在调试的时候，可以看到代码中的标题是相应设置的，但是显示模态后，模态标题是空白的。
How can I properly display the modal title accordingly?
如何相应地正确显示模态标题？
Here is the pertinent part of the HTML:
这是 HTML 的相关部分：
<div class="modal fade" id="btnJournalVoucherEditGrid" tabindex="-1" role="dialog" aria-labelledby="btnJournalVoucherEditGrid-label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="btnJournalVoucherEditGrid-label"></h4>
Here is the JS
这是JS
function onEditJournalVoucher(gdId, rwID)
{
$('#btnJournalVoucherEditGrid-label').val("Edit Journal Voucher")
回答by Tim Lewis
Well, you're trying to use .val()on an H4 tag. Should it not be:
好吧，您正在尝试.val()在 H4 标签上使用。应该不是：
$('#btnJournalVoucherEditGrid-label').text("Edit Journal Voucher");
or
或者
$('#btnJournalVoucherEditGrid-label').html("Edit Journal Voucher");
.val()is the right mindset, but what it does in JQuery is why it won't work in this situation. Take an element that has a value="something"attribute, for example:
.val()是正确的心态，但它在 JQuery 中所做的就是为什么它在这种情况下不起作用。以具有value="something"属性的元素为例：
<input id="example" type="text" name="something" value="something"/>
Targeting this id using $("#example")and calling .val()can access or change the value="something"attribute. Now take a look at a <label>element:
使用$("#example")和调用定位此 id.val()可以访问或更改value="something"属性。现在看一个<label>元素：
<label id="example"> This is some text </label>
Notice the lack of a value="something"attribute? In this case, since "This is some text" is simply plain-text, using:
注意到缺少value="something"属性了吗？在这种情况下，由于“这是一些文本”只是纯文本，使用：
$("#example").text("Updated Text");
is the correct way to go about this. Hope that helps clear things up!
是解决这个问题的正确方法。希望这有助于澄清事情！
回答by Confuseh
.val()is used for form elements (like inputs, checkboxes, etc.)
.val()用于表单元素（如输入、复选框等）
For divs/other elements (e.g. h4 in your situation) use either .text()or .html()depending on the situation you want to do.
In this case since this is just text change your line to:
对于 div/其他元素（例如在您的情况下为 h4），请根据您想要执行的情况使用.text()或.html()。在这种情况下，因为这只是文本将您的行更改为：
$('#btnJournalVoucherEditGrid-label').text("Edit Journal Voucher");
回答by Stephen Reindl
It should be
它应该是
function onEditJournalVoucher(gdId, rwID)
{
$('#btnJournalVoucherEditGrid-label').html("Edit Journal Voucher")
回答by Shynggys Kengessov
Try text()function instead of val():
尝试text()函数而不是val()：
$('#btnJournalVoucherEditGrid-label').text("Edit Journal Voucher")
回答by ggeiger
I would set the title in the button:
我会在按钮中设置标题：
<button id="edit-journal-voucher" data-title="Edit Journal Voucher" data-toggle="modal" data-target="#btnJournalVoucherEditGrid">Edit this Journal</button>
Then in the JS do something like:
然后在 JS 中执行以下操作：
$("#edit-journal-voucher").on("click", funtion(e){
e.preventDefault();
var title = $(this).data('title');
$("h4#btnJournalVoucherEditGrid-label").html(title);
});
