Javascript 如何遍历所有id'；s

查看api-->

每当用户单击某个特定笑话时，它都会添加到收藏夹列表中

为了保持代码简洁，我只展示函数本身：

（函数（）{
“严格使用”；
const getJokesButton=document.getElementById（'getData'）；
getJokesButton.addEventListener（'单击'，获取数据）；
loadLocalStorage（）；
函数loadLocalStorage（）{
让storage=JSON.parse（localStorage.getItem（'favoList'））| |[]；
让listOfFavorites=document.getElementById（“收藏夹”）；
让emptyArray=''；
如果（存储长度>0）{
for（设i=0；i用户标题：${storage[i].joke}`；
listOfFavorites.innerHTML=emptyArray；
}
}否则{
返回false；
}
}
//从api获取数据
函数getData（）{
让Listof笑话=document.getElementById（“笑话列表”）；
取（'https://api.icndb.com/jokes/random/10')
.然后（功能（res）{
返回res.json（）；
}).then（函数（数据）{
//变量未定义，因为它未初始化。因此在某些空单引号处
让结果=“”；
console.log（data.value）；
data.value.forEach（（笑话）=>{
结果+=
`
用户标题：${joke.joke}
`；
listOfJokes.innerHTML=结果；
});
bindCheckbox（）；
}).catch（函数（err）{
控制台日志（err）；
});
}
函数clickedButton（）{
setAttribute（'disabled'，'disabled'）；
getJokesButton.classList.add（'opacity'）；
}
函数bindCheckbox（）{
让inputCheckbox=document.querySelectorAll（'input[type=checkbox]'）；
让elems=document.getElementById（'list-of-crooks'）.childNodes；
让favoriteList=document.getElementById（'favorites'）；
让fav=JSON.parse（localStorage.getItem（'favoList'））| |[]；
如果（elems.length>0）{
forEach（函数（元素、索引）{
inputCheckbox[index].addEventListener（'change'，function（）{
让笑话=这个；
如果（joke.checked&&joke.parentNode.parentNode.id==='笑话列表'）{
checked=false；
favoriteList.appendChild（笑话.parentNode）；
addFavorite（joke.id、joke.parentNode.innerText、fav）；
} 
if（joke.checked&&joke.parentNode.parentNode.id==='favorites'）{
checked=false；
removeFavorite（笑话、索引）；
}
});
});
}
单击按钮（）；
}
函数removeFavorite（收藏夹，索引）{
让favoriteCheckBox=favorite；
设i=指数；
//将iterable对象转换为数组，否则拼接方法将给出错误。
让favoriteListItem=Array.from（favoriteCheckBox.parentNode）；
favoriteListItem.拼接（i，1）；
document.getElementById（'list-of-crooks'）.appendChild（favorite.parentNode）；
setItem（'favoList'，JSON.stringify（favoriteListItem））；
}
//在本地存储中存储收藏夹
函数addFavorite（jokeId、jokeText、fav）{
让诺里斯开玩笑={
id:jokeId，
笑话：笑话文字
};
让收藏夹=fav；
for（设i=0；i

开玩笑
查克·诺里斯的笑话


最爱



你为什么不用地图代替数组呢

正如@fl9所指出的，for循环永远不会启动！因为
favorites.length
的开头是0

但是我想在这个笑话被推到最喜欢的列表之前检查重复的内容

根据定义，散列将不允许重复条目，因此无需担心重复

在fiddle的控制台中运行
localStorage.getItem（'favoList'）
：

（函数（）{
“严格使用”；
const getJokesButton=document.getElementById（'getData'）；
getJokesButton.addEventListener（'单击'，获取数据）；
loadLocalStorage（）；
函数loadLocalStorage（）{
让storage=JSON.parse（localStorage.getItem（'favoList'））| |[]；
让listOfFavorites=document.getElementById（“收藏夹”）；
让emptyArray=''；
如果（存储长度>0）{
for（设i=0；i用户标题：${storage[i].joke}`；
listOfFavorites.innerHTML=emptyArray；
}
}否则{
返回false；
}
}
//从api获取数据
函数getData（）{
让Listof笑话=document.getElementById（“笑话列表”）；
取（'https://api.icndb.com/jokes/random/10')
.然后（功能（res）{
返回res.json（）；
}).then（函数（数据）{
//变量未定义，因为它未初始化。因此在某些空单引号处
让结果=“”；
console.log（data.value）；
data.value.forEach（（笑话）=>{
结果+=
`
用户标题：${joke.joke}
`；
listOfJokes.innerHTML=结果；
});
bindCheckbox（）；
}).catch（函数（err）{
控制台日志（err）；
});
}
函数clickedButton（）{
setAttribute（'disabled'，'disabled'）；
getJokesButton.classList.add（'opacity'）；
}
函数bindCheckbox（）{
让inputCheckbox=document.querySelectorAll（'input[type=checkbox]'）；
让elems=document.getElementById（‘笑话列表’）.chil
let favorites = JSON.parse(localStorage.getItem('favoList'))|| {};

favorites[norrisJoke.id] =norrisJoke.joke 

(function() {
    "use strict";

    const getJokesButton = document.getElementById('getData');
    getJokesButton.addEventListener('click', getData);

    loadLocalStorage();

    function loadLocalStorage() {
        let storage = JSON.parse(localStorage.getItem('favoList')) || [];
        let listOfFavorites = document.getElementById("favorites");
        let emptyArray = '';
        if(storage.length > 0) {
            for(let i = 0; i < storage.length; i++) {
                let idNumberJoke = storage[i].id;
                emptyArray += 
                `<li><input type="checkbox" id='${idNumberJoke}'/> User title: ${storage[i].joke}</li>`;
                listOfFavorites.innerHTML = emptyArray;
            }
        } else {
            return false;
        }
    }

    // fetch data from api
    function getData() {
        let listOfJokes = document.getElementById("list-of-jokes"); 

        fetch('https://api.icndb.com/jokes/random/10')
        .then(function(res) {
            return res.json();
        }).then(function(data) { 
            // variable is undefined because it is not initialized. Therefore at some empty single quotes
            let result = '';
            console.log(data.value);
            data.value.forEach((joke) => {
                result +=
                `<li><input type="checkbox" class='inputCheckbox' id='${joke.id}'/> User title :  ${joke.joke}</li>`;
                listOfJokes.innerHTML = result;
            });
            bindCheckbox();
        }).catch(function(err) {
            console.log(err);
        });
    }

    function clickedButton() {
        getJokesButton.setAttribute('disabled', 'disabled');
        getJokesButton.classList.add('opacity');
    }

    function bindCheckbox() {
        let inputCheckbox = document.querySelectorAll('input[type=checkbox]');
        let elems = document.getElementById('list-of-jokes').childNodes;
        let favoriteList = document.getElementById('favorites');
        let fav = JSON.parse(localStorage.getItem('favoList'))|| [];

        if(elems.length > 0) {  
            inputCheckbox.forEach(function(element, index) {
                inputCheckbox[index].addEventListener('change', function() {
                    let joke = this;
                    if(joke.checked && joke.parentNode.parentNode.id === 'list-of-jokes') { 
                       joke.checked = false;
                       favoriteList.appendChild(joke.parentNode);
                       addFavorite(joke.id, joke.parentNode.innerText, fav);
                    } 
                    if(joke.checked && joke.parentNode.parentNode.id === 'favorites') {
                       joke.checked = false;
                       removeFavorite(joke, index);
                    }
                });
            });
        }
        clickedButton();
    }

    function removeFavorite(favorite, index) {
        let favoriteCheckBox = favorite;
        let i = index;

        // convert iterable object to an array, otherwise splice method would give an error.
        let favoriteListItem = Array.from(favoriteCheckBox.parentNode); 
        favoriteListItem.splice(i, 1);
        document.getElementById('list-of-jokes').appendChild(favorite.parentNode);
        localStorage.setItem('favoList', JSON.stringify(favoriteListItem));
    }

    // store favorites in localStorage
    function addFavorite(jokeId, jokeText, fav) {
        let norrisJoke = {
            id: jokeId,
            joke: jokeText
        };
        let favorites = fav;

        for (let i = 0; i < favorites.length; i++) {
            if(favorites[i].id !== norrisJoke.id) {
                favorites.push(norrisJoke);
            }
        }
        // favorites[i].id !== norrisJoke.id

        // always get the object before the push method and pass it into stringify
        localStorage.setItem('favoList', JSON.stringify(favorites));
    }   

   // function which will randomly add one joke to favorite list every 5 seconds
   // function need a button which allows you to turn on and off this auto add function
})();

favorites = favorites.filter(joke => joke.id !== norrisJoke.id).concat(norrisJoke);

for (let i = 0; i < favorites.length; i++) {
    if(favorites[i].id !== norrisJoke.id) {
        favorites.push(norrisJoke);
    }
}

const favIds = favorites.reduce((sum, element) => { 
        return sum.concat(element.id); 
    }, 
[]);

if(!favIds.includes(jokeId)){
    favorites.push(norrisJoke);
}