Предотвратить добавление классов Slick Slider в HTML после редактирования контента и загрузки HTML в jQuery ⇐ Javascript

[Anonymous]

Я работаю над редактированием функциональности контента с JS, где я динамически добавил CoteDeditable = "true" в некоторые HTML -элементы на нажмите «Редактировать текст». Когда я нажимаю на «Сохранить» после редактирования любого контента, я захватываю обновленный контент из DOM и сохраняю его в файл HTML. < /P>
Вот соответствующий рабочий HTML -файл со всем JS -код: < /p>






Home
[*]


.partner-block .partner-list {
overflow: hidden;
margin: 0;
}
.partner-block .partner-list li {
float: left;
margin: 0 auto;
}
.partner-block .partner-list li a:before {
pointer-events: none;
width: 0;
height: 3px;
z-index: 1;
opacity: 0;
visibility: hidden;
}
.partner-block .partner-list li a:hover:before {
width: 100%;
opacity: 1;
visibility: visible;
}
.partner-block .partner-list .slick-arrow {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: var(--background-primary-color);
border: 1px solid #e8e8e8;
font-size: 14px;
right: 17px;
bottom: 100%;
margin-bottom: 33px;
width: 34px;
height: 34px;
}
.partner-block .partner-list .slick-arrow.slick-disabled {
pointer-events: none;
color: var(--text-color-default);
}
.partner-block .partner-list .slick-arrow:hover {
background-color: var(--secondary-border-color);
color: var(--text-color-default);
border-color: var(--secondary-border-color);
}
.partner-block .partner-list .slick-prev {
margin-right: 41px;
}
[contenteditable="true"] :hover {
border: 1px solid red;
outline: none;
}




Edit text
Save






Trusted Partners

• 
  Test1
  
• 
  Test2
  

$(document).ready(function () {
initSlickCarousel();

// Function to enable content editing
$('#editText').click(function () {
$("body *").attr("contenteditable", "true");

});

// Function to save the edited content and generate a downloadable file
$('#savePage').click(function () {
$("body *").removeAttr("contenteditable");

$(".editor-section").remove();

// Generate the edited HTML content
var htmlContent = $('html').html();
var blob = new Blob([htmlContent], { type: 'text/html' });
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = 'edited_page.html';
a.click();
URL.revokeObjectURL(url); // Clean up the URL object
});

// slick init
function initSlickCarousel() {
"use strict";
jQuery('.partner-list').slick({
slidesToScroll: 1,
rows: 0,
slidesToShow: 1,
prevArrow: 'Previous',
nextArrow: 'Next',
infinite: false,
adaptiveHeight: true,
responsive: [{
breakpoint: 1025,
settings: {
slidesToShow: 5
}
}, {
breakpoint: 991,
settings: {
slidesToShow: 4
}
}, {
breakpoint: 577,
settings: {
slidesToShow: 3
}
}, {
breakpoint: 481,
settings: {
slidesToShow: 2
}
}]
});
}
});



< /code>
Итак, после нажатия «Изменить», если мы изменим любой текст на странице, например, «test1» на «newtest1» и сохранили файл, затем текстовые обновления в загруженном файле, но есть Проблема: когда HTML -код загрузки слайдера, jQuery (jquery.min.js) добавляет классы Slick Slider (slick-slide, инициализованный Slick и т. Д.) к контенту внутри UL с помощью списка классов, подготовленного партнером . Контент внутри класса = "Dynamic-Slider-Wrapper" выглядит примерно так в загруженном HTML-файле: < /p>

• Previous
• aria-hidden="false" tabindex="0" style="width: 1140px;">
  
  NewTest1
  
• style="width: 1140px;">
  
  Test2
  
  
  
  Next

< /code>
Итак, как мы можем избежать классов Slick Slider в загруженном HTML -файле, сохраняя при этом обновленные изменения? Я хочу загрузить файл с исходным HTML -кодом, включая обновленные изменения контента при сохранении. это: < /p>

• 
  NewTest1
  
• 
  Test2
  

Подробнее здесь: https://stackoverflow.com/questions/794 ... it-and-dow