循环时多个未定义变量的问题答案

【问题标题】：Issues of multiple undefined variables when looping循环时多个未定义变量的问题
【发布时间】：2020-11-18 12:15:45
【问题描述】：

我在遍历我的数组时遇到了这个问题，我的网站上显示了这些随机未定义。 Picture of website

这是我的数组：

var quotes = [
{verses: "First quote", chapter: "Psalm 139:7-10", data: "Never be Lost", id: "like1"},
{verses: "Second quote", chapter: "Matthew 27:32-44", data: "The Crucifixion of Jesus", id: "like2"}]

这是我的循环和查找方法：

$('#like1').on('click', function () {
    $("div").find('.quote').each(function () {
        likedVerses[likedVerses.length]={'verses':$(this).html()}
    });
    $("div").find('.name').each(function () {
        likedVerses[likedVerses.length]={'name':$(this).html()}
    });
    $("div").find('.meaning').each(function () {
        likedVerses[likedVerses.length]={'meaning':$(this).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>');
    }
    console.log(likedVerses);
});

还有没有一种方法可以将所有对象放在一个数组中，而不是将每个对象放在单独的数组中？非常感谢您的帮助。

【问题讨论】：

likedVerses 数组在哪里定义？另外，你可以分享html代码而不是截图吗？另外，likedVerses[likedVerses.length]={'name':$(this).html()} 不会覆盖likedVerses[likedVerses.length]={'verses':$(this).html()}

标签： jquery arrays loops object find

【解决方案1】：

大家，我解决了我只需将所有对象放入同一个数组的问题，现在问题消失了。

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

这是我的 HTML：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Verse Generator</title>
    <link href="style.css" type="text/css" rel="stylesheet" media="screen">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<form id="all">
    <label for="likedVersesPopup"><input type="button" id="likedVersesPopup">Liked</label>
<!--    <label for="searchLib"><input type="text" placeholder="Search" id="searchLib"></label>-->
    <div id="elements">
        <div class="quote"></div>
        <div class="name"></div>
        <div class="meaning"></div>
        <input type="checkbox" name="stopTheCycle" id="stopCycle"><label for="stopCycle" id="cycleImg"><img src="pause.svg" alt="Pause. " id="pauseAndPlay" width="16"></label>
        <div id="textSize">
            <input type="radio" name="fontSize" id="smallFont" checked="checked"><label for="smallFont" id="smallFontFont">A</label>
            <input type="radio" name="fontSize" id="medFont"><label for="medFont" id="medFontFont">A</label>
            <input type="radio" name="fontSize" id="largeFont"><label for="largeFont" id="largeFontFont">A</label>
        </div>
        <input type="button" name="like" id="like1"><label for="like1"><img src="not_liked.svg" alt="Wanna Like It? " width="16"></label>
    </div>
    <div class="likedVersesHtml">No Liked Verses</div>
</form>
<script src="http://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="script02.js"></script>
</body>

【讨论】：