Question

因此，对于学校作业，我需要使用jquery和javascript编写基本的移动Web应用程序。我需要创建一个页面，您可以在其中添加书籍的标题和作者，并使用本地存储将其添加到列表中。到目前为止这么好，但我想制作2个列表，一个用于阅读书籍，一个用于阅读书籍。现在我使用分割图标制作了列表视图，因此当它点击时，该书应该移动到另一个列表。该列表视图还包含一个拆分图标，该图标应删除其中的整本图书。

添加部分正在运行，添加的图书会显示在列表视图中，但我似乎无法按下该按钮来更改图书所在的列表。请帮助我，让我失去理智。这是我的html和javascript代码：

<!-- OVERVIEW -->
    <section id="overview" data-role="page" data-theme="b">
        <!-- CONTENT -->
        <div class="ui-content">
            <div>
                <a href="#add" data-role="button" data-theme="b">Add a new book</a>
                <h1>Books to read</h1>
        </div>
            <ul id="booksToRead" data-role="listview" data-split-icon="check" data-theme="b" data-split-theme="b" data-inset="true"></ul>

            <h1>Read books</h1>
            <ul id="readBooks" data-role="listview" data-split-icon="delete" data-theme="b" data-split-theme="b" data-inset="true"></ul>
        </div>
    </section>

和javascript代码

function add() {
    // Retrieve the entered form data
    var title = $('[name="bookTitle"]').val();
    var author = $('[name="bookAuthor"]').val();

    var book = {title:title, author:author};

    // Fetch the existing books to read
    var booksToRead = getObjects("booksToRead");

    // Push the new item into the existing list
    booksToRead.push(book);

    // Store the new list
    saveObjects(booksToRead, "booksToRead");

    //reset textfields
    $('[name="bookTitle"]').val('');
    $('[name="bookAuthor"]').val('');

    // Load the page with all the books
    window.location.href = "#overview";

}

function getObjects(name) {
    // See if objects are inside localStorage
    if (localStorage.getItem(name)) {
        // If yes, then load the objects
        var objects = JSON.parse(localStorage.getItem(name));
    } else {
        // Make a new array of objects
        var objects = new Array();
    }
    return objects;
}

function saveObjects(objects, name) {

    // Save the list into localStorage
    localStorage.setItem(name, JSON.stringify(objects));
}

function read(dit){
    var readBooks = getObjects("readBooks");
    var booksToRead = getObjects("booksToRead");
    var book = booksToRead[dit];

    // Push the new item into the existing list
    readBooks.push(book);

    // Store the new list
    saveObjects(readBooks, "readBooks");

    //Delete from the old list
    deleteme(dit, "booksToRead");

    //Reload page
    window.location.reload();
}

function deleteme(dit, listName) {
    // Fetch existing objects
    var objects = getObjects(listName);

    // Delete given object from list
    objects.splice(dit, 1);

    // Save list
    saveObjects(objects, listName);

    //Reload page
    window.location.reload();
}

function loadPage() {
    // Fetch the existing objects
    var booksToRead = getObjects("booksToRead");
    var readBooks = getObjects("readBooks");

    // Clear the lists
    $('#booksToRead').find('li').remove();
    $('#readBooks').find('li').remove();

    // Add every object to the objects list
    $.each(booksToRead, function(index, item) {
        var title = item.title;
        var author = item.author;
        $('#booksToRead').append('<li><a>' + title + ' - ' + author + '</a><a         class="read" onclick="read(' + booksToRead.index + ')" data-transition="none"></a></li>');
    });
    $.each(readBooks, function(index, item) {
        var title = item.title;
        var author = item.author;
        var listName ="readBooks";
        $('#readBooks').append('<li><a>' + title + ' - ' + author + '</a><a class="delete" onclick="delete(' + readBooks.index + ', ' + listName + ')" data-transition="none"></a></li>');
    });

    $('#booksToRead').listview();
    $('#booksToRead').listview("refresh");
    $('#readBooks').listview();
    $('#readBooks').listview("refresh");
}

$(document).on('pagebeforeshow', '#overview', function(event) {
    loadPage();
});

Answer 1

我认为我收到了你的错误，在$ .each循环中尝试删除你的

booksToRead.index
// and
readBooks.index

只是

index

所以，你的$ .each循环看起来像这样：

 $.each(booksToRead, function(index, item) {
   var title = item.title;
   var author = item.author;
   $('#booksToRead').append('<li><a>' + title + ' - ' + author + '</a><a  class="read" onclick="read(' + index + ')" data-transition="none">ddddd</a></li>');
 });
 $.each(readBooks, function(index, item) {
    var title = item.title;
    var author = item.author;
    var listName ="readBooks";
    $('#readBooks').append('<li><a>' + title + ' - ' + author + '</a><a class="delete" onclick="delete(' + index + ', ' + listName + ')" data-transition="none"></a></li>');
 });

你正试图获得财产＆＃34;索引＆＃34;对象booksToRead虽然您需要做的是获取$ .each循环函数的索引param属性，因此您将获得要移动的书的正确索引。您在控制台中没有收到错误，因为booksToRead.index ===未定义且不会生成任何异常，因此，您的索引将变为......＆＃34; onclick =＆＃34; read（undefined））＆＃34; ... 希望我帮助你，祝你的项目好运！

如何在javascript中将数组中的1个对象移动到另一个数组，然后在listview中显示（jquery）

1 个答案: