我有几个按钮,根据数据库中存储的状态(真或假)单击它们,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”?
感谢您的关注。
最佳答案
首先,虽然我怀疑你只是将它用于测试,但请避免使用一位数字的类名,以及以数字开头的类名,因为 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/
关于jQuery选择问题,事件发生时如何选择元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26461648/