[英]Have a button send an AJAX put request using jQuery
我对ajax不太熟悉,需要一些帮助。 我成功地遍历了json feed,并在其自己的div中输出了信息。 每个对象都有一个布尔值。 根据布尔值是对还是错,某些CSS类会更改。 我想知道如何使内联按钮将当前对象从false设置为true。 下面是我的代码。 HTML为零,jquery正在创建DOM。
$(document).ready(function () {
// Layout Output
$('body').prepend('<div class="container"></div>');
container = $('.container');
$(container).append('<div class="quickselect"><select id="selectField"></select></div>');
selectDropDown = $('#selectField');
$(selectDropDown).append('<option value="option1">Class1</option><option value="option2">Class 2</option>');
options = [];
options.push('<div id="option1" class="box"><p>12/13/2012</p><p>1:00:00 PM</p><p>Auditorium B</p></div>');
options.push('<div id="option2" class="box"><p>12/13/2012</p><p>1:00:00 PM</p><p>Auditorium A</p></div>');
$(selectDropDown).after(options);
$(container).append('<div class="userlist"></div>');
userList = $('.userlist');
$(userList).prepend('<button>Set All as Attended</button>')
users = [];
users.push('<div class="usercontainer">Dillon Raphael1 <button>Set as Attended</button></div>');
users.push('<div class="usercontainer">Dillon Raphael2 <button>Set as Attended</button></div>');
users.push('<div class="usercontainer">Dillon Raphael3 <button>Set as Attended</button></div>');
fetchUsers = function() {
$.getJSON("http://www.json-generator.com/j/cuPmRkQQjm?indent=4", function( data ) {
$.each(data, function(key, val) {
if(val.attended == true) {
users.push('<div class="usercontainer">' + val.name +' ' + val.attended + '<button type="button" disabled class="attended">Attended</button></div>');
} else {
users.push('<div class="usercontainer">' + val.name +' ' + val.attended + '<button class="unattended">Set as Attended</button></div>');
}
});
$(userList).append(users);
});
}
fetchUsers();
});
将要更改布尔值的按钮是
$('.userlist').on('click', 'button', function(event){
var $button = $(event.currentTarget);
var $container = $button.closest('.usercontainer');
//now you can change data- attributes of div.usercontainer or classes...
$container.data('attended', true);
$container.toggleClass('attended unattended');
//etc.
});
这是您需要的吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.