Live
<div class="box"> <div class="content target-1"> <h2 class="selected">.sort() 的效果</h2> <h4 id="array_output"></h4> <div class="container"> <div class="columns images_container is-mobile"> <div class="column has-text-centered" data-id="1"> <img src="https://forgetfulengineer.github.io/gallery/covers/Tracking-File-Modification-History.png"> <p>圖片 1</p> </div> <div class="column has-text-centered" data-id="2"> <img src="https://forgetfulengineer.github.io/gallery/covers/Understanding-five-Common-Relative-Units.png"> <p>圖片 2</p> </div> <div class="column has-text-centered" data-id="3"> <img src="https://forgetfulengineer.github.io/gallery/covers/Using-less-to-View-Files.png"> <p>圖片 3</p> </div> </div> </div> <hr> </div> <div class="field is-grouped"> <button class="button is-link example-1">排序</button> <button class="button reset">reset</button> </div></div>
Live
x
img { width: 25vw; margin: 10px;}
Live
xxxxxxxxxx38
let images_sorting_arr = [1, 2, 3];let images_container = $(".images_container");let images = $(".images_container [data-id]").toArray();array_output();// 方法一$(".example-1").on("click", function () { images_sorting_arr = [3, 1, 2]; array_output(); images_sort();});// reset$(".reset").on("click", function () { images_sorting_arr = [1, 2, 3]; array_output(); images_sort();});function array_output() { console.log(images_sorting_arr); $("#array_output").html( "圖片順序 images_sorting_arr : [" + images_sorting_arr.join(", ") + "]" );}function images_sort() { images.sort(function (a, b) { return ( images_sorting_arr.indexOf($(a).data("id")) - images_sorting_arr.indexOf($(b).data("id")) ); }); images_container.empty(); $(images).appendTo(images_container);}