Question

我一直在尝试从data- *标签获取信息并在模态窗口中将其显示为文本。

这是我到目前为止的代码

打开模态的按钮：

<a class="getRef btn smallbtn" data-title="A General Reference" data-ext-ref="AGENE-100063" href="#modal-container-getExtRef" data-toggle="modal">-Reference-</a>

模态本身：

<div class="modal fade" id="modal-container-getExtRef" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <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="title">String to be replaced</h4>
            </div>
                <div class="modal-body">
                    <div class="form-group">
                         <input type="text" name="extRefId" id="extRefId" value=""/>
                    </div>
                </div>
                <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
        </div>
    </div>
</div>

这是javascript函数：

$(document).on("click", ".getRef", function () {
    var myExtRefId = $(this).data('ext-ref');
    $(".modal-body #extRefId").val('[['+myExtRefId+']]');
    var myTitle = $(this).data('title');
    $(".modal-header #title").text(myTitle);
});

This帮助我了解了如何设置输入元素的value属性，但我遇到的问题是让modal-title成为data-title中存储的文本，并且在模态中显示为标题/标题。我是否以错误的方式使用.text（）方法？

提前道歉，因为我只有一点HTML经验，甚至更少的javascript。

Answer 1

根据我的评论，它似乎实际上是你的解决方案......

由于id属性对于页面是唯一的（或者至少是属于该属性），因此您不需要将选择器与id以外的任何内容复杂化。

这意味着例如：

$(".modal-header #title").text(myTitle);

应更改为：

$("#title").text(myTitle);

这也适用于您：

$(".modal-body #extRefId").val('[['+myExtRefId+']]');

将成为：

$("#extRefId").val('[['+myExtRefId+']]');

我不确定为什么这会解决您的问题，如果没有看到您的所有代码就很难分辨，但如果它有效，那么它就可以了！

在模态窗口中将data- *属性显示为文本

1 个答案: