使用 jquery 执行数据切换

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23238137/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 02:13:11  来源:igfitidea点击:

perform data-toggle with jquery

jqueryhtmltwitter-bootstrap

提问by Lord Vermillion

I have a button that toggles a bootstrap modal.

我有一个按钮可以切换引导模式。

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

I want to do the same thing with a jquery function. Is this possible?

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

回答by Snake Eyes

With simple code like you posted:

使用像您发布的简单代码:

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

It won't show modal dialog unless you write code in javascript like:

除非您在 javascript 中编写代码,否则它不会显示模态对话框,例如:

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

And what you will put in data-targetwill open a div with id as dialog modal.

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

or

或者

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

回答by Ehsan Sajjad

give your button id and hide it:

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

CSS:

CSS:

#btnTrigger
{
display:none;
}

HTML:

HTML:

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

and on someother event or condition just click it programmatically:

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

JQuery:

查询:

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

In Result, popup will be displayed.

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

回答by sridharnetha

below code worked for me, you can call this function on any event

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

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

回答by MKZ

Just a simple $("#myModal").modal()in any function of your choice

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

回答by Yaron

Maybe you should read this explanationabout the "data-" html5 attribute.

也许你应该阅读本解释关于“数据- ” HTML5属性。

You can define custom data- attributes and use them when developing your plugins.

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

This is what bootstrap did.

这就是 bootstrap 所做的。

If you want to use it in JQuery to show a modal dialog - you should write a plugin similar to what bootstrap did.

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

I suggest you read bootstrap's source code and see how they used this attribute.

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