Question

我有三个不同按钮的相同模态对话框。

但是，根据点击的按钮，我需要动态设置模态对话框的标题。

我认为使用jQuery在适当的javascript函数中设置标题很简单。但是，在调试时，我可以看到标题在代码中相应设置，但显示模式后，模态标题为空白

如何正确显示模态标题？

以下是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">&times;</button>
                                                            <h4 class="modal-title" id="btnJournalVoucherEditGrid-label"></h4>

这是JS

function onEditJournalVoucher(gdId, rwID)
{
  $('#btnJournalVoucherEditGrid-label').val("Edit Journal Voucher")

Answer 1

嗯，您正在尝试在H4标记上使用.val()。不应该是：

$('#btnJournalVoucherEditGrid-label').text("Edit Journal Voucher");

或

$('#btnJournalVoucherEditGrid-label').html("Edit Journal Voucher");

.val()是正确的心态，但它在JQuery中的作用是为什么它在这种情况下不起作用。获取具有value="something"属性的元素，例如：

<input id="example" type="text" name="something" value="something"/>

使用$("#example")定位此ID并调用.val()可以访问或更改value="something"属性。现在看一下<label>元素：

<label id="example"> This is some text </label>

请注意缺少value="something"属性？在这种情况下，由于“这是一些文本”只是纯文本，使用：

$("#example").text("Updated Text");

是正确的方法。希望有助于澄清事情！

Answer 2

.val()用于表单元素（如输入，复选框等）

对于div /其他元素（例如您所处的情况下的h4），请使用.text()或.html()，具体取决于您要执行的操作。在这种情况下，因为这只是文本将您的行更改为：

$('#btnJournalVoucherEditGrid-label').text("Edit Journal Voucher");

Answer 3

应该是

function onEditJournalVoucher(gdId, rwID)
{
    $('#btnJournalVoucherEditGrid-label').html("Edit Journal Voucher")

Answer 4

尝试使用 text（）函数而不是 val（）：

$('#btnJournalVoucherEditGrid-label').text("Edit Journal Voucher")

Answer 5

我会在按钮中设置标题：

<button id="edit-journal-voucher" data-title="Edit Journal Voucher" data-toggle="modal" data-target="#btnJournalVoucherEditGrid">Edit this Journal</button>

然后在JS中执行类似的操作：

$("#edit-journal-voucher").on("click", funtion(e){
  e.preventDefault();
  var title = $(this).data('title');
  $("h4#btnJournalVoucherEditGrid-label").html(title);
});

动态设置Bootstrap 3模态标题

以下是HTML的相关部分：

这是JS

5 个答案: