bootstrap模态框动态赋值

背景：我有几个按钮，调用的都是一个模态框，每点击一个，弹出的模态框的标题、内容要随之改变。

我要动态改变的模态框内容：标题和内容两部分

比如我现在点击[星座运势]右边的[老黄历]，模态框内显示的内容应该是老黄历的具体信息。

 

在这里，我没有用官方的那种什么多个按钮公用一个模态框，然后要配置什么什么data-???（忘记是data-什么了）的方法。

我在只是在查看详情按钮那里加了一个onclick事件，然后调用方法传递参数给模态框赋值。

（1）详情按钮

<button class="btn btn-primary btn-sm" data-target="#myModal" data-toggle="modal" onclick="goDetail('参数a','参数b')">[查看详情] </button>

（2）onclick时间调用的方法goDetail(参数a,参数b)

function goDetail(title,text) {
        $("#myModalLabel").html(title);
        $("#modal_text").html(text);
    }

（3）模态框

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <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">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body">
                <p  id="modal_text"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

这个模态框代码是我从官网拷贝过来的，没有做什么改变。放这只是为了做演示。

 

到此，赋值结束。

在这里我要说一下这个function里面的赋值。

在写代码的时候，我用了两种写法，一种是写法1，一种是写法2。

用写法1出来的效果是这样的：比如，我先点击[星座运势]的查看详情：

紧接着，我再点击[老黄历]，这个时候问题出现了

我刚开始以为是模态框的缓存问题，还做了刷新。后来发现刷新没有用。于是我开始质疑这个append的用法我是不是搞错了。我记得在后端代码中，append是追加的意思，前后端难道还有两幅面孔？

百度一下，果然，append还是追加的意思。

所以，function里面要摒弃写法1改用写法2，这样就不会有问题了