#javascript
Вопрос:
Я начал использовать элемент подробности/сводка, чтобы составленное мной расписание было более удобным для пользователя на мобильном устройстве. @Sparrow любезно предоставил мне скрипт для автоматического удаления событий с истекшим сроком действия на следующий день. С тех пор как я начал оборачивать код в тег сведений/сводки, события с истекшим сроком действия не удаляются.
Как бы я изменил сценарий, предоставленный @Sparrow, чтобы заставить это работать. Я включил код, который я использую ниже, со сценарием внизу.
lt;!-- 4th Dec --gt; lt;detailsgt; lt;summary id="day-and-date" date="4-12-21"gt; Saturday - 4th December lt;/summarygt; lt;detailsgt; lt;summary id="club"gt; lt;img id="image-date" src="img/cooking.jpg" alt=""gt; lt;p id="location"gt; Room 8lt;/pgt; lt;p id="time"gt;12:30PM lt;/pgt; lt;p id="event" gt;- Japanese Cooking lt;/pgt; lt;/summarygt; lt;div class="gallery"gt; lt;div class="image eventItem" date="4-12-21" id="jap-cook" data-name="jap-cook"gt; lt;spangt;lt;img id="image-large" src="img/sushi-large.jpg" alt=""gt;lt;/spangt; lt;spangt;lt;img id="image-small" src="img/sushi-small.jpg" alt=""gt;lt;/spangt; lt;h4 id="pinboard-day"gt;lt;a href="structures/Japanese-class-times.pdf" target=“_blank” gt;lt;i class="fa fa-file-pdf-o" title="Timetable" aria-hidden="true"gt;lt;/igt;lt;/agt;Saturday arvolt;/h4gt; lt;h4 id="pinboard-date" gt;4th Decemberlt;/h4gt; lt;p id="pinboard-text"gt;lt;bgt; Japanese Cooking lt;/bgt; lt;/pgt; lt;p id="pinboard-text2"gt;lt;bgt;lt;brgt;lt;/bgt;lt;/pgt; lt;p id="pinboard-supplies"gt;All ingredients suppliedlt;/pgt; lt;p id="pinboard-cost"gt;$55lt;/pgt; lt;p id="pinboard-start"gt;12:30PM Startlt;/pgt; lt;div class="card-bottom"gt; lt;img id="card-bottom-smith-image" src="img/jap-cook-bottom.jpg" alt=""gt; lt;p class="card-text-bottom"gt; Cooking Classes lt;brgt;12 Smith St lt;brgt; Anywhere lt;/pgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/detailsgt; lt;detailsgt; lt;summary id="club"gt; lt;img id="image-date" src="img/cooking.jpg" alt=""gt; lt;p id="location"gt; Room 10lt;/pgt; lt;p id="time"gt;1:30PM lt;/pgt; lt;p id="event" gt;- French Cooking lt;/pgt; lt;/summarygt; lt;div class="gallery"gt; lt;div class="image eventItem" date="4-12-21" id="french-cook" data-name="french-cook"gt; lt;spangt;lt;img id="image-large" src="img/bagette-large.jpg" alt=""gt;lt;/spangt; lt;spangt;lt;img id="image-small" src="img/bagette-small.jpg" alt=""gt;lt;/spangt; lt;h4 id="pinboard-day"gt;lt;a href="structures/French-class-times.pdf" target=“_blank” gt;lt;i class="fa fa-file-pdf-o" title="Timetable" aria-hidden="true"gt;lt;/igt;lt;/agt;Saturday arvolt;/h4gt; lt;h4 id="pinboard-date" gt;4th Decemberlt;/h4gt; lt;p id="pinboard-text"gt;lt;bgt; French Cooking lt;/bgt; lt;/pgt; lt;p id="pinboard-text2"gt;lt;bgt;lt;brgt;lt;/bgt;lt;/pgt; lt;p id="pinboard-supplies"gt;All ingredients suppliedlt;/pgt; lt;p id="pinboard-cost"gt;$35lt;/pgt; lt;p id="pinboard-start"gt;1:30PM Startlt;/pgt; lt;div class="card-bottom"gt; lt;img id="card-bottom-smith-image" src="img/french-cook-bottom.jpg" alt=""gt; lt;p class="card-text-bottom"gt; Cooking Classes lt;brgt;12 Smith St lt;brgt; Anywhere lt;/pgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/detailsgt; lt;detailsgt; lt;summary id="club"gt; lt;img id="image-date" src="img/cooking.jpg" alt=""gt; lt;p id="location"gt; Room 3lt;/pgt; lt;p id="time"gt;5:30PM lt;/pgt; lt;p id="event" gt;- Cheese making lt;/pgt; lt;/summarygt; lt;div class="gallery"gt; lt;div class="image eventItem" date="4-12-21" id="cheese-cook" data-name="cheese-cook"gt; lt;spangt;lt;img id="image-large" src="img/cheese-large.jpg" alt=""gt;lt;/spangt; lt;spangt;lt;img id="image-small" src="img/cheese-small.jpg" alt=""gt;lt;/spangt; lt;h4 id="pinboard-day"gt;lt;a href="structures/Cheese-class-times.pdf" target=“_blank” gt;lt;i class="fa fa-file-pdf-o" title="Timetable" aria-hidden="true"gt;lt;/igt;lt;/agt;Saturday arvolt;/h4gt; lt;h4 id="pinboard-date" gt;4th Decemberlt;/h4gt; lt;p id="pinboard-text"gt;lt;bgt; Cheese making lt;/bgt; lt;/pgt; lt;p id="pinboard-text2"gt;lt;bgt;lt;brgt;lt;/bgt;lt;/pgt; lt;p id="pinboard-supplies"gt;Please bring your own milklt;/pgt; lt;p id="pinboard-cost"gt;$15lt;/pgt; lt;p id="pinboard-start"gt;5:30PM Startlt;/pgt; lt;div class="card-bottom"gt; lt;img id="card-bottom-smith-image" src="img/cheese-cook-bottom.jpg" alt=""gt; lt;p class="card-text-bottom"gt; Cooking Classes lt;brgt;12 Smith St lt;brgt; Anywhere lt;/pgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/detailsgt; lt;/detailsgt; lt;!-- 6th Dec --gt; lt;detailsgt; lt;summary id="day-and-date" date="6-12-21"gt; Monday - 6th December lt;/summarygt; lt;detailsgt; lt;summary id="club"gt; lt;img id="image-date" src="img/cooking.jpg" alt=""gt; lt;p id="location"gt; Room 5lt;/pgt; lt;p id="time"gt;12:30PM lt;/pgt; lt;p id="event" gt;- Japanese Cooking lt;/pgt; lt;/summarygt; lt;div class="gallery"gt; lt;div class="image eventItem" date="6-12-21" id="jap-cook" data-name="jap-cook"gt; lt;spangt;lt;img id="image-large" src="img/sushi-large.jpg" alt=""gt;lt;/spangt; lt;spangt;lt;img id="image-small" src="img/sushi-small.jpg" alt=""gt;lt;/spangt; lt;h4 id="pinboard-day"gt;lt;a href="structures/Japanese-class-times.pdf" target=“_blank” gt;lt;i class="fa fa-file-pdf-o" title="Timetable" aria-hidden="true"gt;lt;/igt;lt;/agt;Saturday arvolt;/h4gt; lt;h4 id="pinboard-date" gt;4th Decemberlt;/h4gt; lt;p id="pinboard-text"gt;lt;bgt; Japanese Cooking lt;/bgt; lt;/pgt; lt;p id="pinboard-text2"gt;lt;bgt;lt;brgt;lt;/bgt;lt;/pgt; lt;p id="pinboard-supplies"gt;All ingredients suppliedlt;/pgt; lt;p id="pinboard-cost"gt;$55lt;/pgt; lt;p id="pinboard-start"gt;12:30PM Startlt;/pgt; lt;div class="card-bottom"gt; lt;img id="card-bottom-smith-image" src="img/jap-cook-bottom.jpg" alt=""gt; lt;p class="card-text-bottom"gt; Cooking Classes lt;brgt;12 Smith St lt;brgt; Anywhere lt;/pgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/detailsgt; lt;/detailsgt; `enter code here` lt;!-- DELETES EVENTS AFTER THE DATE HAS PAST --gt; lt;scriptgt; const htmlDateSettings = { "date-format": "d-m-y", "date-devider": "-" } removeExpiredEvents(); // call function automatically function removeExpiredEvents() { let eventItems = Array.from(document.querySelectorAll('.eventItem')); let df = htmlDateSettings['date-format']; let dd = htmlDateSettings['date-devider']; let msInOneDay = 1000 * 60 * 60 * 24; let today = new Date().getTime(); for(let eventItem of eventItems) { let date = eventItem.getAttribute('date'); if(!date) continue; date = date.split(dd); let dateFormat = df.split(dd); let filteredDate = `${date[dateFormat.indexOf('m')]}/${date[dateFormat.indexOf('d')]}/${date[dateFormat.indexOf('y')]}` filteredDate = new Date(filteredDate).getTime(); filteredDate = filteredDate msInOneDay; // increased 1 day in event date if(today gt; filteredDate) eventItem.style.display = 'none'; } } lt;/scriptgt; Ответ №1:
Хорошо, сначала я подумал о том, чтобы обернуть весь DIV, вставив следующее в начале, а затем добавив конечный DIV, выделенный жирным шрифтом ниже. Я попробовал это, и это не сработало. Затем я понял, что Эммет добавляет закрывающий DIV примерно через 1 секунду после того, как я вставил этот первый DIV. Затем я удалил этот закрывающий раздел, и все это сработало.
lt;!-- 6th Dec --gt; **lt;div class="image eventItem" date="6-12-21"gt;** lt;detailsgt; lt;summary id="day-and-date" date="6-12-21"gt; Monday - 6th December lt;/summarygt; lt;detailsgt; lt;summary id="club"gt; lt;img id="image-date" src="img/cooking.jpg" alt=""gt; lt;p id="location"gt; Room 5lt;/pgt; lt;p id="time"gt;12:30PM lt;/pgt; lt;p id="event" gt;- Japanese Cooking lt;/pgt; lt;/summarygt; lt;div class="gallery"gt; lt;div class="image eventItem" date="6-12-21" id="jap-cook" data-name="jap-cook"gt; lt;spangt;lt;img id="image-large" src="img/sushi-large.jpg" alt=""gt;lt;/spangt; lt;spangt;lt;img id="image-small" src="img/sushi-small.jpg" alt=""gt;lt;/spangt; lt;h4 id="pinboard-day"gt;lt;a href="structures/Japanese-class-times.pdf" target=“_blank” gt;lt;i class="fa fa-file-pdf-o" title="Timetable" aria-hidden="true"gt;lt;/igt;lt;/agt;Saturday arvolt;/h4gt; lt;h4 id="pinboard-date" gt;4th Decemberlt;/h4gt; lt;p id="pinboard-text"gt;lt;bgt; Japanese Cooking lt;/bgt; lt;/pgt; lt;p id="pinboard-text2"gt;lt;bgt;lt;brgt;lt;/bgt;lt;/pgt; lt;p id="pinboard-supplies"gt;All ingredients suppliedlt;/pgt; lt;p id="pinboard-cost"gt;$55lt;/pgt; lt;p id="pinboard-start"gt;12:30PM Startlt;/pgt; lt;div class="card-bottom"gt; lt;img id="card-bottom-smith-image" src="img/jap-cook-bottom.jpg" alt=""gt; lt;p class="card-text-bottom"gt; Cooking Classes lt;brgt;12 Smith St lt;brgt; Anywhere lt;/pgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/detailsgt; lt;/detailsgt; **lt;/divgt;**