jQuery选择问题，事件发生时如何选择元素？

Question

我有几个按钮，根据数据库中存储的状态(真或假)单击它们，0:使用ajax更改数据库中的值，1:出现确认模式，如果用户确认，则再次使用ajax值更改。

HTML:

<span class="1" data-state="{{ $subscribe->newsletter }}" data-type="1"></span>
<span class="2" data-state="{{ $subscribe->send_products }}" data-type="2"></span>
<span class="3" data-state="{{ $subscribe->send_shares}}" data-type="3"></span>

jQuery:

  var confirm_modal = $('#unsubscribe-confirmation');

  $('.1, .2, .3').click(function() {

     var button = $(this);
     var state = $(this).data('state');
     var type = $(this).data('type');

     if ( state == 1 ) {
        confirm_modal.modal();
     } else {
        $.ajax({
           'url': get_base_url_with_ajax_url() + 'subscribe',
           'data': { "state": state, "type" : type },
           'type': 'POST',
           'dataType': 'json',
           success: function(result) {
              button.attr('data-state', '1');
           }
        });
     }
  });
 confirm_modal.find('#confirm').click(function() {
     $.ajax({
        'url': get_base_url_with_ajax_url() + 'subscribe',
        'data': { "state": state, "type": type },
        'type': 'POST',
        'dataType': 'json',
        success: function(result) {
           $(this).attr('data-state', '0');
           confirm_modal.modal('hide');
        }
  });

因此，在第一个语句中，当更改数据状态时，选择器 $(this) 起作用。但是，当出现模态时，如何选择首先采用的元素:“.sbs-nwlttr，.sbs-evt，.sbs-prod”？

感谢您的关注。

Answer 1

首先，虽然我怀疑你只是将它用于测试，但请避免使用一位数字的类名，以及以数字开头的类名，因为 css 中不允许这样做(更多详细信息可以在 this questions 中找到) ，因此将 class="1" 重命名为 class="one"。

另一方面，您遇到的唯一问题是您的 button 变量不是全局变量，仅在其中一个函数内声明。在外部声明它，然后您也可以在其他函数中使用它，如下所示:

var button;

$('.one, .two, .three').click(function() {

    button = $(this);
    // ...
}

confirm_modal.find('#confirm').click(function() {

    alert(button.text()); // for example

}

我设置了一个 fiddle 来演示这一点(与上面略有不同，但应该清楚地显示行为:http://jsfiddle.net/wz6v306k/