使用 jquery 执行数据切换答案

【问题标题】：perform data-toggle with jquery使用 jquery 执行数据切换
【发布时间】：2017-12-08 22:06:24
【问题描述】：

我有一个用于切换引导模式的按钮。

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

我想用 jquery 函数做同样的事情。这可能吗？

【问题讨论】：

我想用 jquery 函数做 data-toggle"modal" data-target"#myModal"。
您是否阅读过引导站点上的文档？如果你这样做了，你应该注意到它可以通过 javascript 方式触发 $('#myModal').modal('show')

标签： jquery html twitter-bootstrap

【解决方案1】：

提供您的按钮 ID 并将其隐藏：

CSS：

#btnTrigger
{
display:none;
}

HTML：

<button class="btn btn-primary btn-lg" id="btnTrigger" data-toggle="modal" data-target="#myModal">

在其他事件或条件下，只需以编程方式单击它：

JQuery：

$('#btnTrigger').click();

在结果中，将显示弹出窗口。

【讨论】：

【解决方案2】：

使用您发布的简单代码：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

除非你用 javascript 编写代码，否则它不会显示模态对话框：

$("button").on("click", function(){
  $($(this).attr("data-target")).modal("show");
});

您将在data-target 中输入的内容将打开一个 id 为对话框模式的 div。

或

$("button").on("click", function(){
  $($(this).data("target")).modal("show");
});

【讨论】：

是用户的选择，不是我的:)
绝对是更好的答案，因为它回答了问题而不是解决问题。哦，好吧，我发现它很有帮助！

【解决方案3】：

下面的代码对我有用，你可以在任何事件上调用这个函数

 <script type="text/javascript">
    $(document).ready(function () {
        ShowModel = function () {
            $("#myModal").modal();
        }
    });
</script>

【讨论】：

我不知道为什么 this 不是答案

【解决方案4】：

在您选择的任何功能中只需一个简单的$("#myModal").modal()

【讨论】：

【解决方案5】：

也许您应该阅读this explanation 关于“data-”html5 属性的信息。

您可以定义自定义数据属性并在开发插件时使用它们。

这就是引导程序所做的。

如果您想在 JQuery 中使用它来显示模式对话框 - 您应该编写一个类似于 bootstrap 的插件。

我建议你阅读 bootstrap 的源代码，看看他们是如何使用这个属性的。

【讨论】：