javascript - jquery选择一个按钮

Question

我有一个 html 页面，其中包含多个 Bootstrap 模式。我想用 jquery 关闭它们。但是，我在选择它们时遇到了困难。

这是 html 的示例:

<div class="modal-footer span5">
  <input class="btn btn-primary" name="commit" type="submit" value="Save Material">
</div>

这个 jquery( CoffeeScript )不起作用:

$(".modal-footer .btn").each.click ->
  alert 'commit'
  $(this).modal "hide"

或者这个:

  $(".modal-footer .btn").click.each ->
    alert 'commit'
    $(this).modal "hide"

谢谢!

Answer 1

JS 引擎不解释 Coffeescript。相反，该 block 需要首先编译成 JavaScript。 (或者你可以直接编写javascript)。

如果您的 .modal-footer 类来自默认引导模式，这意味着它是整个模式 html block 的唯一部分，则页脚可能不是附加处理程序以关闭它的最佳位置。

开箱即用，bootstrap 带有一个默认的模态结构，如下所示:

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-    labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
       <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
       <button class="btn btn-primary">Save changes</button>
    </div>
</div>

要关闭它，最简单的方法是使用内置的引导行为，但通过引用构成模态的最外层 html 元素，在本例中为 div，其中 id="myModal":

$('#myModal').modal('隐藏');

对于您的示例，如果您知道容器的 ID:

$(".modal-footer .btn").click(function(){
    alert('commit');
    $('#myModal').modal('hide');
});

如果没有，您可以使用 .parent() 调用字符串向上遍历树，就像前面响应中的示例一样。

除非我错过了什么......