javascript - 收藏按钮
问题描述
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
<link rel="stylesheet" href="css/style.css" />
<title>List</title>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar id="header" color="secondary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title id="inbox">Places</ion-title>
<ion-buttons slot="end">
<ion-button id="delete-all">
<ion-icon name="trash-outline"></ion-icon>
</ion-button>
<ion-button href="add.html">
<ion-icon name="add-outline"></ion-icon>
<ion-label>Add Place</ion-label>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list id="place-list">
</ion-list>
<template id="place-template">
<ion-item-sliding>
<ion-item lines="full">
<ion-label id="label" data="0">
<h2></h2>
<ion-icon size="large" id="ion-icon" slot="end"></ion-icon>
</ion-label>
<ion-buttons>
<ion-button id="star-button">
<ion-icon id="star" name="star-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-item>
<ion-item-options side="end">
<ion-item-option>
<ion-buttons>
<ion-button id="delete_one" onclick="deleteOne()">
<ion-icon size="large" name="trash-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</template>
</ion-content>
<ion-menu side="start" menu-id="first" content-id="main">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Start Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-buttons>
<ion-button href="index.html">
<ion-label>List of places</ion-label>
<ion-icon slot="end" name="list-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-item>
<ion-item>
<ion-buttons>
<ion-button href="add.html">
<ion-label>Adding places</ion-label>
<ion-icon slot="end" name="add-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-item>
<ion-item>
<ion-buttons>
<ion-button href="about.html">
<ion-label>About</ion-label>
<ion-icon slot="end" name="information-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<div id="main"></div>
</ion-app>
</body>
<script>
</script>
<script>
// -----------------------------------------------------------------------------------------------
//Triggered when the user clicks on the trash icon when the user swipes on the ion-item
function deleteOne() {
showPlaces();
var loadSaved = JSON.parse(localStorage.getItem("allPlaces"));
console.log(localStorage);
console.log(loadSaved);
//Try to implement the same function but with a while loop to avoid
//searching the remaining array position after the correct email has been found
for (var i = 0; i < loadSaved.length; i++) {
console.log(i);
console.log(this);
//remove one item at the position
loadSaved.splice(i, 1);
}
if (loadSaved.length == 0) {
localStorage.removeItem("allPlaces");
} else {
localStorage.setItem("allPlaces", JSON.stringify(loadSaved));
}
list.innerHTML = "";
console.log(loadSaved);
}
// -----------------------------------------------------------------------------------------------
function confirmDeleteAlert() {
//1. Create it
var alert = document.createElement("ion-alert");
//2. Set it
alert.header = "Places";
alert.message = "Are you sure you want to delete all Places?";
alert.buttons = [
{
text: 'NO'
},
{
text: 'YES',
handler: () => {
deleteAll();
showPlaces();
}
}
]
//3. Append it to the html
document.body.appendChild(alert);
//4. Display it
return alert.present();
}
//When the page loads up, the function should run in the background so notes can be shown
var list = document.getElementById("place-list");
document.getElementById("delete-all").addEventListener("click", confirmDeleteAlert);
// To delete all the notes and the key "allPlaces"
function deleteAll() {
localStorage.removeItem("allPlaces");
showPlaces();
}
</script>
<script src="cordova.js"></script>
<script src="js/script_pass_data.js"></script>
<script src="js/index2.js"></script>
</html>
所有的最爱都在转向真假。
window.addEventListener("load", showPlaces);
var star = document.getElementById("star");
//----------------------------------------------------------------------------------------------------//
function showPlaces() {
var template = document.getElementById("place-template");
var loadSavedPlaces = JSON.parse(localStorage.getItem("allPlaces"));
// console.log(localStorage);
var template = document.getElementById("place-template");
// console.log(template);
// if loadSavedPlaces is null then say "No places saved yet.", else make a copy of the template
if (loadSavedPlaces == null) {
list.innerHTML = "No places saved yet.";
loadSavedPlaces.forEach(list);
var label = document.getElementById("place-template");
label.textContent = "No places saved yet";
list.appendChild(label);
}
else {
for (var i = 0; i < loadSavedPlaces.length; i++) {
// console.log(i);
//We are copying what is inside the template. We are using firstElementChild so
//we do not copy the template tag - we just get ion-item
var templateCOPY = template.content.firstElementChild.cloneNode(true);
// console.log(templateCOPY);
var label = templateCOPY.children[0].children[0];
var starButton = templateCOPY.children[0].children[1];
console.log(loadSavedPlaces[i]);
starButton.addEventListener("click", favorite);
label.addEventListener("click", openModal);
// label.addEventListener("click", getPosition);
label.children[0].textContent = loadSavedPlaces[i].address;
label.children[1].name = loadSavedPlaces[i].placetype;
// console.log(label);
list.appendChild(templateCOPY);
}
}
}
function checkTime(i) {
if (i < 10) { i = "0" + i }; // add zero in front of numbers < 10
return i;
}
var today = new Date();
var loadSavedPlaces = JSON.parse(localStorage.getItem("allPlaces"));
for (var i = 0; i < loadSavedPlaces.length; i++) {
var places = [
{
'Address': loadSavedPlaces[i].address,
'Description': loadSavedPlaces[i].description,
'IconName': loadSavedPlaces[i].placetype,
'DateAndTimeCreation': today.getFullYear() + '-' + checkTime((today.getMonth() + 1)) + '-' + checkTime(today.getDate()) + ' ' + checkTime(today.getHours()) + ':' + checkTime(today.getMinutes()),
}
]
}
window.addEventListener("load", showPlaces);
function favorite() {
// console.log(this.children[0].children[0]);
var list = document.getElementById("place-list");
var template = document.getElementById("place-template");
var templateCOPY = template.content.firstElementChild.cloneNode(true);
var label = templateCOPY.children[0].children[0];
// var starButton = templateCOPY.children[0].children[1];
var loadSavedPlaces = JSON.parse(localStorage.getItem("allPlaces"));
var x = document.querySelector("#star-button");
var starButton = this.children[0];
var icon = starButton.children[0];
for (var i = 0; i < loadSavedPlaces.length; i++)
{
if(loadSavedPlaces[i].favorites == "false"){
loadSavedPlaces[i].favorites = "true";
icon.setAttribute("name", "star");
icon.color = "warning";
}
else{
loadSavedPlaces[i].favorites = "false";
icon.setAttribute("name", "star-outline");
icon.color = "dark";
}
}
localStorage.setItem("allPlaces", JSON.stringify(loadSavedPlaces));
}
customElements.define('modal-page', class extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<body>
<ion-app>
<ion-header>
<ion-toolbar color="warning">
<ion-title>I am a modal</ion-title>
<ion-buttons slot="end">
<ion-button onclick="dismissModal()">
<ion-icon name="close-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-item>
<ion-label">
<h2>Title: ${modalElement.componentProps.placeInfo.Address}</h2>
<h4>Description: ${modalElement.componentProps.placeInfo.Description}</h4>
Category: <ion-icon slot="end" name="${modalElement.componentProps.placeInfo.IconName}"></ion-icon><br>
Date and time created: <p>${modalElement.componentProps.placeInfo.DateAndTimeCreation}</p>
<div id="map">
<iframe id="google_map" width="425" height="350" frameboarder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
</ion-label>
</ion-item>
</ion-content>
</ion-app>
</body>
`;
}
})
const modalElement = document.createElement("ion-modal");
function openModal() {
modalElement.component = "modal-page";
var c = function (pos) {
var lat = pos.coords.latitude;
var long = pos.coords.longitude;
var cords = lat + ", " + long;
document.getElementById("google_map").setAttribute("src", "https://www.google.com/maps/embed/v1/place?key=AIzaSyCdrL38QxWO88FYNGgl1mq1lEXJBg4U6uA&q=" + cords);
onDeviceReady();
}
navigator.geolocation.getCurrentPosition(c);
modalElement.componentProps = {
'placeInfo': places[this.getAttribute("data")]
}
document.body.appendChild(modalElement);
return modalElement.present();
}
function dismissModal() {
modalElement.dismiss();
}
我们正在复制模板中的内容。我们使用的是 firstElementChild，所以我们不复制模板标签——我们只得到 ion-item。
我从showPlaces() 中的starButton 调用该函数。
万一，点击星星按钮时，是否只能将每个收藏夹变成真假？
解决方案
推荐阅读
- node.js - 有没有办法在 Nodejs 中检测重定向与刷新？
- c# - c# 使用泛型替换方法和类
- c++ - 在向量中找到最小的数
- c# - C#中的参数化查询
- amazon-web-services - 如何在 AWS 中使用 elasticsearch 或 Kibana 控制台
- typescript - 如何将 SonarQube 集成到 Angular 8 项目的詹金斯管道中
- visual-studio-code - 如何在 Visual Studio Code 中仅在单行中包含两个或多个相同的关键字进行评论？
- python - 如何在 Selenium 中找到这些复选框元素
- prolog - Prolog，是否可以使用变量来调用子句？
- angular - ngIf 不在大子指令中工作