jQuery 与 Twitter 引导模式一起工作

Question

使用 bootstrap，我们有大约多个 div 从按钮 1 到按钮 6。使用 jquery，将出现一个带有另外 2 个按钮的模式，取消并确认。

现在，当我单击确认时，模态将关闭并且按钮的状态将发生变化。例如 Button1 更改为“已单击”。当我点击取消时，模态将关闭。

问题是这样的：当我单击第一个按钮并取消，然后单击第二个按钮并确认时，两个按钮都会变为“已单击”

4 个按钮或 5 个按钮也是如此。

我的html

<!-- START OF PAID CUSTOM MODAL -->
<div id="paid-custom-modal" 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">Fees Payment For</h3>
  </div>
  <div class="modal-body">
    CONFIRM?
  </div>
  <div class="modal-footer">
    <button class="paid-custom-cancel btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
    <button class="paid-custom-confirm btn btn-primary">Confirm</button>
  </div>
</div>
<!-- END OF PAID CUSTOM MODAL -->
  <div class="paid-custom">BUTTON 1</div>
  <div class="paid-custom">BUTTON 2</div>
  <div class="paid-custom">BUTTON 3</div>
  <div class="paid-custom">BUTTON 4</div>
  <div class="paid-custom">BUTTON 5</div>
  <div class="paid-custom">BUTTON 6</div>

我的 jquery

$(document).ready(function(){
  $(document).on('click', ".paid-custom", function() {
    var $this=$(this);

    $('#paid-custom-modal').modal();

    $(document).on('click', ".paid-custom-confirm", function() {
       $this.html('CLICKED');
        $('#paid-custom-modal').modal('hide');
    });
  });
});

Answer 1

编辑：

好的，我误解了这个问题，请查看此代码，它应该添加您想要的行为，但也可以考虑将状态保存在 cookie 中，否则每次刷新都会杀死状态，或者如果需要，如果此按钮是，请采取适当的服务器端处理意味着只点击一次

$(document).ready(function(){
    $(document).on('click', ".paid-custom", function() {
        $(this).addClass('active');
        $('#paid-custom-modal').modal().find('btn-primary');
    });
    $(document).on('click', ".paid-custom-confirm", function() {
           $('.active').html('CLICKED');
            $('#paid-custom-modal').modal('hide');
        });
     $(document).on('click', ".paid-custom-cancel", function() {
           $('.active').removeClass('active');
            $('#paid-custom-modal').modal('hide');
        });

});

问候一月