Как вернуть значения в исходное состояние JS?

Question

[AndreyNikonin]

let cart = [
    { target: '#cart1' },
    { target: '#cart2' },
    { target: '#cart3' },
    { target: '#cart4' },
    { target: '#cart5' },
    { target: '#cart6' },
    { target: '#cart7' },
];

let parent = document.querySelector("#cart")
document.querySelectorAll("#cart > *").forEach(function(elem) {
  elem.addEventListener("mouseenter", function() {
    // console.log(elem);
    parent.append(elem)
  })
})

<div class="cart-container">
  <svg version="1.1" id="cart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FF0000;}
</style>
<g>
    <path class="st0" d="M469,916.7c-16.8,0-30.9-12.1-33.5-28.7l-52-325.9c-1.4-9,0.7-18,6.1-25.3c5.3-7.4,13.2-12.2,22.2-13.6
        l240.9-38.4c1.8-0.3,3.6-0.4,5.4-0.4c16.8,0,30.9,12.1,33.5,28.7l52,325.9c1.4,9-0.7,18-6.1,25.3c-5.3,7.4-13.2,12.2-22.2,13.6
        l-240.9,38.4C472.6,916.5,470.8,916.7,469,916.7z"/>
    <path d="M658,484.8c7.9,0,15.6,2.8,21.6,7.9c6.1,5.2,10.2,12.4,11.4,20.3l52,325.9c2.9,18.2-9.6,35.5-27.8,38.4l-240.9,38.4
        c-1.8,0.3-3.6,0.4-5.3,0.4c-7.9,0-15.6-2.8-21.6-7.9c-6.1-5.2-10.2-12.4-11.4-20.3l-52-325.9c-1.4-8.8,0.7-17.7,6-24.9
        c5.3-7.2,13-12,21.9-13.4l240.9-38.4C654.5,485,656.3,484.8,658,484.8L658,484.8 M658,483.8c-1.8,0-3.6,0.1-5.5,0.4l-240.9,38.4
        c-18.8,3-31.7,20.7-28.7,39.5l52,325.9c2.7,17,17.4,29.1,34,29.1c1.8,0,3.6-0.1,5.5-0.4l240.9-38.4c18.8-3,31.7-20.7,28.7-39.5
        l-52-325.9C689.4,495.9,674.7,483.8,658,483.8L658,483.8z"/>
</g>
<g>
    <path class="st0" d="M659.9,888.8c-17.2,0-31.7-12.9-33.7-30l-39.1-327.6c-2.2-18.6,11.1-35.6,29.7-37.8l242.3-28.9
        c1.3-0.2,2.7-0.2,4.1-0.2c17.2,0,31.7,12.9,33.7,30l39.1,327.6c2.2,18.6-11.1,35.6-29.7,37.8l-242.3,28.9
        C662.6,888.7,661.2,888.8,659.9,888.8z"/>
    <path d="M863.1,464.7c16.9,0,31.2,12.7,33.2,29.6l39.1,327.6c1.1,8.9-1.4,17.7-6.9,24.7s-13.5,11.5-22.4,12.6L663.9,888
        c-1.3,0.2-2.7,0.2-4,0.2c-16.9,0-31.2-12.7-33.2-29.6l-39.1-327.6c-2.2-18.4,11-35.1,29.3-37.2L859.1,465
        C860.5,464.8,861.8,464.7,863.1,464.7L863.1,464.7 M863.1,463.7c-1.4,0-2.7,0.1-4.1,0.2l-242.3,28.9c-18.9,2.3-32.4,19.4-30.2,38.4
        l39.1,327.6c2.1,17.5,17,30.4,34.2,30.4c1.4,0,2.7-0.1,4.1-0.2l242.3-28.9c18.9-2.3,32.4-19.4,30.2-38.4l-39.1-327.6
        C895.3,476.6,880.4,463.7,863.1,463.7L863.1,463.7z"/>
</g>
<g>
    <path class="st0" d="M1401.2,916.7c-1.8,0-3.6-0.1-5.4-0.4l-240.9-38.4c-18.5-3-31.2-20.4-28.2-38.9l52-325.9
        c2.6-16.6,16.8-28.7,33.5-28.7c1.8,0,3.6,0.1,5.4,0.4l240.9,38.4c9,1.4,16.9,6.3,22.2,13.6s7.5,16.3,6.1,25.3l-52,325.9
        C1432.2,904.6,1418,916.7,1401.2,916.7C1401.3,916.7,1401.3,916.7,1401.2,916.7z"/>
    <path d="M1212.2,484.8c1.8,0,3.6,0.1,5.3,0.4l240.9,38.4c8.8,1.4,16.6,6.2,21.9,13.4c5.3,7.2,7.4,16.1,6,24.9l-52,325.9
        c-1.3,7.9-5.3,15.1-11.4,20.3c-6.1,5.1-13.7,7.9-21.6,7.9c-1.8,0-3.6-0.1-5.3-0.4L1155,877.3c-18.2-2.9-30.7-20.1-27.8-38.4
        l52-325.9c1.3-7.9,5.3-15.1,11.4-20.3C1196.6,487.7,1204.3,484.8,1212.2,484.8 M1212.2,483.8c-16.7,0-31.3,12.1-34,29.1l-52,325.9
        c-3,18.8,9.8,36.5,28.7,39.5l240.9,38.4c1.8,0.3,3.7,0.4,5.5,0.4c16.7,0,31.3-12.1,34-29.1l52-325.9c3-18.8-9.8-36.5-28.7-39.5
        l-240.9-38.4C1215.8,484,1214,483.8,1212.2,483.8L1212.2,483.8z"/>
</g>
<g>
    <path class="st0" d="M1210.4,888.8c-1.4,0-2.7-0.1-4.1-0.2L964,859.7c-18.6-2.2-32-19.2-29.7-37.8l39.1-327.6
        c2-17.1,16.5-30,33.7-30c1.4,0,2.7,0.1,4.1,0.2l242.3,28.9c18.6,2.2,32,19.2,29.7,37.8l-39.1,327.6
        C1242,875.9,1227.5,888.8,1210.4,888.8C1210.4,888.8,1210.4,888.8,1210.4,888.8z"/>
    <path d="M1007.1,464.7c1.3,0,2.7,0.1,4,0.2l242.3,28.9c18.4,2.2,31.5,18.9,29.3,37.2l-39.1,327.6c-2,16.8-16.3,29.6-33.2,29.6
        c-1.3,0-2.7-0.1-4-0.2l-242.3-28.9c-18.4-2.2-31.5-18.9-29.3-37.2l39.1-327.6C975.9,477.4,990.1,464.7,1007.1,464.7 M1007.1,463.7
        c-17.2,0-32.1,12.9-34.2,30.4l-39.1,327.6c-2.3,18.9,11.3,36.1,30.2,38.4l242.3,28.9c1.4,0.2,2.8,0.2,4.1,0.2
        c17.2,0,32.1-12.9,34.2-30.4l39.1-327.6c2.3-18.9-11.3-36.1-30.2-38.4L1011.2,464C1009.8,463.8,1008.4,463.7,1007.1,463.7
        L1007.1,463.7z"/>
</g>
<g>
    <path class="st0" d="M840.5,865.5c-18.8,0-34-15.3-34-34v-330c0-18.8,15.3-34,34-34h244c18.8,0,34,15.3,34,34v330
        c0,18.8-15.3,34-34,34H840.5z"/>
    <path d="M1084.5,468c18.5,0,33.5,15,33.5,33.5v330c0,18.5-15,33.5-33.5,33.5h-244c-18.5,0-33.5-15-33.5-33.5v-330
        c0-18.5,15-33.5,33.5-33.5H1084.5 M1084.5,467h-244c-19.1,0-34.5,15.5-34.5,34.5v330c0,19.1,15.5,34.5,34.5,34.5h244
        c19.1,0,34.5-15.5,34.5-34.5v-330C1119,482.5,1103.5,467,1084.5,467L1084.5,467z"/>
</g>
</svg>
</div>

Сделал логику на ховер, а сейчас нужно сделать так что когда отвел мышь от объекта то карта стала на своё первоначально исходное место?

Comments

[Сергей Сергей]

исходное значение надо запомнить.

[AndreyNikonin]

Сергей Сергей, Как тогда изменить нужно код, чтобы запомнить исходное значение?

[Сергей Сергей]

Добавить переменную с исходным значением, добавить функцию для применения исходного значения, повесить нужный обработчик.

[AndreyNikonin]

Сергей Сергей, А можно пожалуйста пример? Не понимаю как это сделать..

[Сергей Сергей]

const initial = elem.value;

elem.onmouseenter = function() {
  this.value = Math.random();
}

elem.onmouseleave = function() {
  this.value = initial;
}

[AndreyNikonin]

Сергей Сергей, Спасибо, но как этот код привязать к моему коду?

[Сергей Сергей]

Запомнить как html и переписывать.

[Khalit]

Можете клонировать исходный элемент со всеми вложенными элементами с помощью element.cloneNode(true) потом его можно поменять местами с элементом который нужно вернуть в исходное состояние parent.repalceChild(newChild, oldChild) также клонированный элемент теряет обработчиков событий