Question

我对ajax不是很熟悉，需要一些帮助。我成功循环浏览json feed并在其自己的div中输出信息。每个对象都附加一个布尔值。根据布尔值是true还是false，某些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();
});

要按下以更改布尔值的按钮是

Answer 1

$('.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.
});

你需要的是什么？

让按钮使用jQuery发送AJAX put请求

1 个答案: