如何使用复选框制作一个赞按钮以将随机生成的引号存储到数组中

Posted 2023-05-09

【中文标题】如何使用复选框制作一个赞按钮以将随机生成的引号存储到数组中

【英文标题】：How can I make a like button using a checkbox to store randomly generated quotes into an array

【发布时间】：2020-11-03 07:23:30

【问题描述】：

我已经使用 math.random 显示了一个随机生成的报价生成器，我希望能够有一个类似按钮，该按钮能够将所有喜欢的报价收集到另一个数组中，这样它就可以显示在另一个弹出框。所以这就是我到目前为止在我的数组中使用一个复选框按钮一个名为的对象

var quotes = [
verses: "This is my first quote", chapter: "Psalm 139:7-10", data: "Never be Lost", id: "like1", like: '<input type="checkbox" name="like" id="like1"><label for="like1"><img src="not_liked.svg"  ></label>',
verses: "This is my second quote", chapter: "Matthew 27:32-44", data: "The Crucifixion of Jesus", id: "like2", like: '<input type="checkbox" name="like" id="like2"><label for="like1"><img src="not_liked.svg"  ></label>',]$(document).ready(function () 
console.log(likedVerses);
function showQuote () 
    var init = Object.keys(quotes);
    var rng = init[Math.floor(Math.random()*init.length)];
    $('.quote').html(quotes[rng].verses);
    $('.name').html(quotes[rng].chapter);
    $('.meaning').html(quotes[rng].data);
    $('.like').html(quotes[rng].like);
);

然后我在 document.ready 函数内部添加了一个循环遍历数组的 for 循环

    $("input[type='checkbox']").click(function () 
    for (var i = 0; i < quotes.length; i++)
        if(quotes[i].id === this.id)
            if ($(this).is(":not(:checked)"))
                
            
            else 
                likedVerses.push(quotes[i])
            
            break;
        
    

基本上我希望有一个复选框，分配给每个随机生成的报价，当它被选中时，它将对象存储到一个数组中。非常感谢您的帮助。

【问题讨论】：

当询问特定语言的问题时，您添加的第一个标签应该是您正在编码的语言。请edit您的帖子并将其中一个标签替换为该语言的标签。

去掉var init = Object.keys(quotes);，把var rng = init[Math.floor(Math.random()*init.length)];改成var rng = quotes[Math.floor(Math.random()*quotes.length)];。

请注意，这些天您不需要使用 for 循环，只需使用 find;查看Find object by id in an array of javascript objects的答案。

@HereticMonkey 你知道我如何让一个函数为一个复选框工作，并且在数组/对象内有一个复选框

【参考方案1】：

我已经完成了一个 .find 方法，并且能够遍历数组，因此我可以在我的 HTML 中显示它

    $('#like1').on('click', function () 
    var versesFind = $(".quote");
    var nameFind = $(".name");
    var meaningFind = $(".meaning")
    $("div").find(versesFind, nameFind, meaningFind).each(function () 
        likedVerses[likedVerses.length]='verses':$(versesFind).html(), 'name':$(nameFind).html(), 'meaning':$(meaningFind).html()
    );
    $('.likedVersesHtml').html("");
    for (var j = 0; j < likedVerses.length; j++)
        $('.likedVersesHtml').append('<div>' + likedVerses[j].verses + '</div>' + '<div>' + likedVerses[j].name + '</div>' + '<div>' + likedVerses[j].meaning + '</div>');
    
);