當使用js和jquery按下向上和向下按鈕時，如何交換內部DIV數據？

Question

我有工作代碼，其中有一個時間表。 時間軸內的每個事件都相互關聯。

這是一個刪除按鈕，用於刪除特定數據。 還有另一種復制數據。 但是我想當我單擊向上按鈕和向下按鈕時。

就像我點擊向上按鈕時一樣。 它應該將第三元素數據交換為第二數據，並將第二數據交換為第三數據。 和相同的向下按鈕。 這是工作示例代碼，請查看它。 並且幫助將不勝感激。

 $(document).ready(function() { $("#edit_button").click(function() { $("#slide").css("display", "none"); }) $("#slide section").attr("contenteditable", "true"); var i = 1; $("section").each(function() { $(this).attr("id", i); $(this).append("<div class='deleteStyle'>" + "&#10006" + "</div>"); $(this).append("<div class='deleteStyle2'>" + "&#10010" + "</div>"); $(this).append("<div class='deleteStyle3'>" + "&#x2191" + "</div>"); $(this).append("<div class='deleteStyle4'>" + "h" + "</div>"); i++; }); $("#slide").on('click', '.deleteStyle', function() { $(this).parent("section").remove() }); $("#slide").on('click', '.deleteStyle2', function() { var ele = $(this).closest("section").clone(true); $(this).closest("section").after(ele); }); $("#slide").on('click', '.deleteStyle4', function() { var currentData = $(this).parent().next().html(); var currentString = "<section>" + currentData + "</section>"; console.log(currentString) var abc1 = $(this).next().replaceWith(currentString); console.log(abc1) }); $("#slide").on('click', '.deleteStyle3', function() { var previousData = $(this).parent().prev().html(); var previousString = "<section>" + previousData + "</section>"; console.log(previousString) var abc = $(this).prev().replaceWith(previousString); console.log(abc) // $(this).parent().remove().html(); // $(this).closest("section").after(previousString); // $(this).closest("section").before(currentString); // console.log(currentData); // console.log(previousData); }); }); 

 div[type="timeline/slideshow"]>section, div[type="timeline"]>section { margin: auto; width: 500px; z-index: 100; opacity: 1; border-left: 4px solid #00BCD4; border-top: 1px solid grey; min-height: 130px; background-color: #b3e5fc2b; border-radius: 4px; margin-bottom: 55px; position: relative; top: 50px; box-shadow: rgb(136, 136, 136) 3px 3px 1px; -webkit-animation: fadein 2s; -moz-animation: fadein 2s; -ms-animation: fadein 2s; -o-animation: fadein 2s; animation: fadein 2s; } /*div[type="timeline/slideshow"] > section:hover , div[type="timeline"] > section:hover { opacity:1; } */ div[type="timeline/slideshow"]::before, div[type="timeline"]::before { content: ""; position: absolute; left: 50%; bottom: 0; width: .2rem; background: white; height: 55px; } div[type="timeline/slideshow"]>section::after, div[type="timeline"]>section::after { content: ""; position: absolute; left: 50%; bottom: -56px; width: .2rem; background: grey; height: 54px; } div[type="timeline/slideshow"]>section>header, div[type="timeline"]>section>header { font-weight: 600; color: cadetblue; transform: translate(16px, 23px); font-size: 30px; font-family: arial; padding: 3px; position: relative; word-wrap: break-word; line-height: 31px; } div[type="timeline/slideshow"]>section>article, div[type="timeline"]>section>article { transform: translate(12px, 14px); color: black; font-size: 20px; font-family: arial; position: relative; padding: 9px; word-wrap: break-word; line-height: 31px; } div[type="timeline"]>section:last-of-type::after { display: none; } div[type="slideshow"] { height: 471px; position: relative; top: 100px; } div[type="slideshow"]>section:not(.hideClass) { margin: auto; width: 900px; max-height: 265px; z-index: 100; border-top: 1px solid grey; border-left: 4px solid #00BCD4; min-height: 250px; background-color: #b3e5fc2b; border-radius: 4px; margin-bottom: 55px; position: absolute; overflow-x: hidden; top: 21.4%; left: 168px; box-shadow: rgb(136, 136, 136) 3px 3px 1px; } div[type="slideshow"]>section:not(.hideClass)>header { font-weight: 600; color: cadetblue; transform: translate(93px, 32px); font-size: 34px; font-family: arial; position: relative; word-wrap: break-word; } div[type="slideshow"]>section:not(.hideClass)>article { transform: translate(87px, 39px); max-width: 800px; color: black; font-size: 22px; font-family: arial; position: relative; padding: 10px; word-wrap: break-word; } /*.activeClass{ opacity: 1 !important; } */ .hideClass { opacity: 0; min-height: 0 !important; margin: 0 !important; } .hideClass header, .hideClass article { display: none; } @keyframes fadein { 0% { opacity: 0 } 50% { opacity: 0.5 } 100% { opacity: 1 } } div[type="timeline"] br { display: none; } .progressClass { height: 4px; display: none; top: 46px; left: 0px; width: 100%; position: fixed; margin-left: -1px; margin-top: -1px; } .color_arrow { position: relative; top: 228px; color: #085153; left: 93px; } .color_arrows { position: relative; top: 228px; color: #085153; left: 94% !important; } @media only screen and (max-width: 992px) { div[type="timeline/slideshow"]>section, div[type="timeline"]>section { width: 650px; } .color_arrow { left: -18px; } div[type="slideshow"]>section:not(.hideClass) { width: 640px; left: 14px; } .color_arrows { left: 99% !important; } } @media only screen and (max-width: 992px) { div[type="slideshow"]>section { width: 650px; } div[type="slideshow"]>section:not(.hideClass) { width: 640px; left: 18px; } } @media only screen and (min-width: 1201px) and (max-width: 1299px) { div[type="slideshow"]>section:not(.hideClass) { width: 845px; left: 154px; } } @media only screen and (min-width: 992px) and (max-width: 1200px) { div[type="slideshow"]>section:not(.hideClass) { width: 698px; left: 136px; } } #slide { display: block; } .edit_timeline { margin: 4%; } .containers { font-weight: 800; font-style: arial; font-size: 24px; width: 500px; height: 100px; margin: 2%; border: 1px solid grey; } #modal_timeline { margin-left: 25px; } .deleteStyle { position: relative; width: 30px; height: 30px; border-radius: 50%; background-color: cadetblue; padding-left: 10px; padding-top: 5px; float: right; right: 12px; bottom: 80px; color: white; } .deleteStyle2 { position: relative; width: 30px; height: 30px; border-radius: 50%; background-color: cadetblue; padding-left: 10px; padding-top: 5px; float: right; right: 17px; bottom: 80px; color: white; } .deleteStyle3 { position: relative; width: 30px; height: 30px; border-radius: 50%; background-color: cadetblue; padding-left: 12px; padding-top: 5px; float: right; right: 20px; bottom: 80px; color: white; } .deleteStyle4 { position: relative; width: 30px; height: 30px; border-radius: 50%; background-color: cadetblue; padding-left: 12px; padding-top: 5px; float: right; right: 24px; bottom: 80px; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="containers">Click on Edit Timeline button to see the Timeline.</div> <div class="demo"> <div type="timeline" id="slide"> <section> <header>Title One</header> <article>Content one</article> </section> <section> <header>Title Two</header> <article>Content one</article> </section> <section> <header>Title Three</header> <article>Content one</article> </section> <section> <header>Title Four</header> <article>Content one</article> </section> </div> </div> <button type="button" class="btn btn-success" id="modal_timeline" data-toggle="modal" data-target="#myModal">Edit Timeline</button> 

Answer 1

請參考jsfiddle作為參考。 在這里，通過鼠標的上下鍵選擇被按下的項目。 https://jsfiddle.net/webdev_sudhi/avudyb2t/3/

 $(document).ready(function() { $("#edit_button").click(function() { $("#slide").css("display", "none"); }) $("#slide section").attr("contenteditable", "true"); var i = 1; $("section").each(function() { $(this).attr("id", i); $(this).append("<div class='deleteStyle'>" + "&#10006" + "</div>"); $(this).append("<div class='deleteStyle2'>" + "&#10010" + "</div>"); $(this).append("<div class='deleteStyle3'>" + "&#x2191" + "</div>"); $(this).append("<div class='deleteStyle4'>" + "h" + "</div>"); i++; }); $("#slide").on('click', '.deleteStyle', function() { $(this).parent("section").remove() }); $("#slide").on('click', '.deleteStyle2', function() { var ele = $(this).closest("section").clone(true); $(this).closest("section").after(ele); }); $("#slide").on('click', '.deleteStyle4', function() { var currentData = $(this).parent().next().html(); var currentString = "<section>" + currentData + "</section>"; console.log(currentString) var abc1 = $(this).next().replaceWith(currentString); console.log(abc1) }); $("#slide").on('click', '.deleteStyle3', function() { //added new code here var previousData = $(this).parent().prev(); $preTitle = $(previousData).find('header').text(); $preContent = $(previousData).find('article').text(); $(this).parent().find('header').text($preTitle); $(this).parent().find('article').text($preContent); //end here var previousString = "<section>" + previousData + "</section>"; console.log(previousString) var abc = $(this).prev().replaceWith(previousString); console.log(abc) // $(this).parent().remove().html(); // $(this).closest("section").after(previousString); // $(this).closest("section").before(currentString); // console.log(currentData); // console.log(previousData); }); }); 

 div[type="timeline/slideshow"]>section, div[type="timeline"]>section { margin: auto; width: 500px; z-index: 100; opacity: 1; border-left: 4px solid #00BCD4; border-top: 1px solid grey; min-height: 130px; background-color: #b3e5fc2b; border-radius: 4px; margin-bottom: 55px; position: relative; top: 50px; box-shadow: rgb(136, 136, 136) 3px 3px 1px; -webkit-animation: fadein 2s; -moz-animation: fadein 2s; -ms-animation: fadein 2s; -o-animation: fadein 2s; animation: fadein 2s; } /*div[type="timeline/slideshow"] > section:hover , div[type="timeline"] > section:hover { opacity:1; } */ div[type="timeline/slideshow"]::before, div[type="timeline"]::before { content: ""; position: absolute; left: 50%; bottom: 0; width: .2rem; background: white; height: 55px; } div[type="timeline/slideshow"]>section::after, div[type="timeline"]>section::after { content: ""; position: absolute; left: 50%; bottom: -56px; width: .2rem; background: grey; height: 54px; } div[type="timeline/slideshow"]>section>header, div[type="timeline"]>section>header { font-weight: 600; color: cadetblue; transform: translate(16px, 23px); font-size: 30px; font-family: arial; padding: 3px; position: relative; word-wrap: break-word; line-height: 31px; } div[type="timeline/slideshow"]>section>article, div[type="timeline"]>section>article { transform: translate(12px, 14px); color: black; font-size: 20px; font-family: arial; position: relative; padding: 9px; word-wrap: break-word; line-height: 31px; } div[type="timeline"]>section:last-of-type::after { display: none; } div[type="slideshow"] { height: 471px; position: relative; top: 100px; } div[type="slideshow"]>section:not(.hideClass) { margin: auto; width: 900px; max-height: 265px; z-index: 100; border-top: 1px solid grey; border-left: 4px solid #00BCD4; min-height: 250px; background-color: #b3e5fc2b; border-radius: 4px; margin-bottom: 55px; position: absolute; overflow-x: hidden; top: 21.4%; left: 168px; box-shadow: rgb(136, 136, 136) 3px 3px 1px; } div[type="slideshow"]>section:not(.hideClass)>header { font-weight: 600; color: cadetblue; transform: translate(93px, 32px); font-size: 34px; font-family: arial; position: relative; word-wrap: break-word; } div[type="slideshow"]>section:not(.hideClass)>article { transform: translate(87px, 39px); max-width: 800px; color: black; font-size: 22px; font-family: arial; position: relative; padding: 10px; word-wrap: break-word; } /*.activeClass{ opacity: 1 !important; } */ .hideClass { opacity: 0; min-height: 0 !important; margin: 0 !important; } .hideClass header, .hideClass article { display: none; } @keyframes fadein { 0% { opacity: 0 } 50% { opacity: 0.5 } 100% { opacity: 1 } } div[type="timeline"] br { display: none; } .progressClass { height: 4px; display: none; top: 46px; left: 0px; width: 100%; position: fixed; margin-left: -1px; margin-top: -1px; } .color_arrow { position: relative; top: 228px; color: #085153; left: 93px; } .color_arrows { position: relative; top: 228px; color: #085153; left: 94% !important; } @media only screen and (max-width: 992px) { div[type="timeline/slideshow"]>section, div[type="timeline"]>section { width: 650px; } .color_arrow { left: -18px; } div[type="slideshow"]>section:not(.hideClass) { width: 640px; left: 14px; } .color_arrows { left: 99% !important; } } @media only screen and (max-width: 992px) { div[type="slideshow"]>section { width: 650px; } div[type="slideshow"]>section:not(.hideClass) { width: 640px; left: 18px; } } @media only screen and (min-width: 1201px) and (max-width: 1299px) { div[type="slideshow"]>section:not(.hideClass) { width: 845px; left: 154px; } } @media only screen and (min-width: 992px) and (max-width: 1200px) { div[type="slideshow"]>section:not(.hideClass) { width: 698px; left: 136px; } } #slide { display: block; } .edit_timeline { margin: 4%; } .containers { font-weight: 800; font-style: arial; font-size: 24px; width: 500px; height: 100px; margin: 2%; border: 1px solid grey; } #modal_timeline { margin-left: 25px; } .deleteStyle { position: relative; width: 30px; height: 30px; border-radius: 50%; background-color: cadetblue; padding-left: 10px; padding-top: 5px; float: right; right: 12px; bottom: 80px; color: white; } .deleteStyle2 { position: relative; width: 30px; height: 30px; border-radius: 50%; background-color: cadetblue; padding-left: 10px; padding-top: 5px; float: right; right: 17px; bottom: 80px; color: white; } .deleteStyle3 { position: relative; width: 30px; height: 30px; border-radius: 50%; background-color: cadetblue; padding-left: 12px; padding-top: 5px; float: right; right: 20px; bottom: 80px; color: white; } .deleteStyle4 { position: relative; width: 30px; height: 30px; border-radius: 50%; background-color: cadetblue; padding-left: 12px; padding-top: 5px; float: right; right: 24px; bottom: 80px; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="containers">Click on Edit Timeline button to see the Timeline.</div> <div class="demo"> <div type="timeline" id="slide"> <section> <header>Title One</header> <article>Content one</article> </section> <section> <header>Title Two</header> <article>Content one</article> </section> <section> <header>Title Three</header> <article>Content one</article> </section> <section> <header>Title Four</header> <article>Content one</article> </section> </div> </div> <button type="button" class="btn btn-success" id="modal_timeline" data-toggle="modal" data-target="#myModal">Edit Timeline</button> 

Answer 2

我對您的腳本進行了一些更改以解決該問題：

Javascript：我僅使用一個事件來確定何時單擊向上或向下，但是我必須添加一個帶有按鈕方向名稱的data屬性，以找出哪個按鈕發出呼叫。

  $(document).ready(function () { $("#edit_button").click(function () { $("#slide").css("display", "none"); }) $("#slide section").attr("contenteditable", "true"); var i = 1; $("section").each(function () { $(this).attr("id", i); $(this).append("<div class='deleteStyle'>" + "&#10006" + "</div>"); $(this).append("<div class='deleteStyle2'>" + "&#10010" + "</div>"); $(this).append("<div class='deleteStyle3' data-direction='up'>" + "&#x2191" + "</div>"); $(this).append("<div class='deleteStyle4' data-direction='down' >" + "h" + "</div>"); i++; }); $("#slide").on('click', '.deleteStyle', function () { $(this).parent("section").remove() }); $("#slide").on('click', '.deleteStyle2', function () { var ele = $(this).closest("section").clone(true); $(this).closest("section").after(ele); }); $("#slide").on('click', '.deleteStyle3, .deleteStyle4 ', function (e) { var direction = $(e.currentTarget).data().direction, $currentSection = $(this).parent(), $sectionToMove = direction === 'up' ? $(this).parent().prev() : $(this).parent().next(), currentSectionData = $currentSection.html(), sectionToMoveData = $sectionToMove.html(); $currentSection.html(sectionToMoveData); $sectionToMove.html(currentSectionData); }); }); 

 div[type="timeline/slideshow"]>section, div[type="timeline"]>section { margin: auto; width: 500px; z-index: 100; opacity: 1; border-left: 4px solid #00BCD4; border-top: 1px solid grey; min-height: 130px; background-color: #b3e5fc2b; border-radius: 4px; margin-bottom: 55px; position: relative; top: 50px; box-shadow: rgb(136, 136, 136) 3px 3px 1px; -webkit-animation: fadein 2s; -moz-animation: fadein 2s; -ms-animation: fadein 2s; -o-animation: fadein 2s; animation: fadein 2s; } /*div[type="timeline/slideshow"] > section:hover , div[type="timeline"] > section:hover { opacity:1; } */ div[type="timeline/slideshow"]::before, div[type="timeline"]::before { content: ""; position: absolute; left: 50%; bottom: 0; width: .2rem; background: white; height: 55px; } div[type="timeline/slideshow"]>section::after, div[type="timeline"]>section::after { content: ""; position: absolute; left: 50%; bottom: -56px; width: .2rem; background: grey; height: 54px; } div[type="timeline/slideshow"]>section>header, div[type="timeline"]>section>header { font-weight: 600; color: cadetblue; transform: translate(16px, 23px); font-size: 30px; font-family: arial; padding: 3px; position: relative; word-wrap: break-word; line-height: 31px; } div[type="timeline/slideshow"]>section>article, div[type="timeline"]>section>article { transform: translate(12px, 14px); color: black; font-size: 20px; font-family: arial; position: relative; padding: 9px; word-wrap: break-word; line-height: 31px; } div[type="timeline"]>section:last-of-type::after { display: none; } div[type="slideshow"] { height: 471px; position: relative; top: 100px; } div[type="slideshow"]>section:not(.hideClass) { margin: auto; width: 900px; max-height: 265px; z-index: 100; border-top: 1px solid grey; border-left: 4px solid #00BCD4; min-height: 250px; background-color: #b3e5fc2b; border-radius: 4px; margin-bottom: 55px; position: absolute; overflow-x: hidden; top: 21.4%; left: 168px; box-shadow: rgb(136, 136, 136) 3px 3px 1px; } div[type="slideshow"]>section:not(.hideClass)>header { font-weight: 600; color: cadetblue; transform: translate(93px, 32px); font-size: 34px; font-family: arial; position: relative; word-wrap: break-word; } div[type="slideshow"]>section:not(.hideClass)>article { transform: translate(87px, 39px); max-width: 800px; color: black; font-size: 22px; font-family: arial; position: relative; padding: 10px; word-wrap: break-word; } /*.activeClass{ opacity: 1 !important; } */ .hideClass { opacity: 0; min-height: 0 !important; margin: 0 !important; } .hideClass header, .hideClass article { display: none; } @keyframes fadein { 0% { opacity: 0 } 50% { opacity: 0.5 } 100% { opacity: 1 } } div[type="timeline"] br { display: none; } .progressClass { height: 4px; display: none; top: 46px; left: 0px; width: 100%; position: fixed; margin-left: -1px; margin-top: -1px; } .color_arrow { position: relative; top: 228px; color: #085153; left: 93px; } .color_arrows { position: relative; top: 228px; color: #085153; left: 94% !important; } @media only screen and (max-width: 992px) { div[type="timeline/slideshow"]>section, div[type="timeline"]>section { width: 650px; } .color_arrow { left: -18px; } div[type="slideshow"]>section:not(.hideClass) { width: 640px; left: 14px; } .color_arrows { left: 99% !important; } } @media only screen and (max-width: 992px) { div[type="slideshow"]>section { width: 650px; } div[type="slideshow"]>section:not(.hideClass) { width: 640px; left: 18px; } } @media only screen and (min-width: 1201px) and (max-width: 1299px) { div[type="slideshow"]>section:not(.hideClass) { width: 845px; left: 154px; } } @media only screen and (min-width: 992px) and (max-width: 1200px) { div[type="slideshow"]>section:not(.hideClass) { width: 698px; left: 136px; } } #slide { display: block; } .edit_timeline { margin: 4%; } .containers { font-weight: 800; font-style: arial; font-size: 24px; width: 500px; height: 100px; margin: 2%; border: 1px solid grey; } #modal_timeline { margin-left: 25px; } .deleteStyle { position: relative; width: 30px; height: 30px; border-radius: 50%; background-color: cadetblue; padding-left: 10px; padding-top: 5px; float: right; right: 12px; bottom: 80px; color: white; } .deleteStyle2 { position: relative; width: 30px; height: 30px; border-radius: 50%; background-color: cadetblue; padding-left: 10px; padding-top: 5px; float: right; right: 17px; bottom: 80px; color: white; } .deleteStyle3 { position: relative; width: 30px; height: 30px; border-radius: 50%; background-color: cadetblue; padding-left: 12px; padding-top: 5px; float: right; right: 20px; bottom: 80px; color: white; } .deleteStyle4 { position: relative; width: 30px; height: 30px; border-radius: 50%; background-color: cadetblue; padding-left: 12px; padding-top: 5px; float: right; right: 24px; bottom: 80px; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="containers">Click on Edit Timeline button to see the Timeline.</div> <div class="demo"> <div type="timeline" id="slide"> <section> <header>Title One</header> <article>Content one</article> </section> <section> <header>Title Two</header> <article>Content one</article> </section> <section> <header>Title Three</header> <article>Content one</article> </section> <section> <header>Title Four</header> <article>Content one</article> </section> </div> </div> <button type="button" class="btn btn-success" id="modal_timeline" data-toggle="modal" data-target="#myModal">Edit Timeline</button>