如何更改单击时HTML元素(图像）的顺序

How to change the order of HTML element (images) onclick

本文关键字：图像 顺序 元素 何更改 单击 HTML      更新时间：2023-09-26

我是HTML/SCC/JC的初学者，我尝试自己解决问题。但这一次我的时间太多了，我决定寻求帮助。说实话，我在互联网上找答案）

我需要通过点击按钮来更改图像的顺序，如何做到这一点？

JS: function change_order() { } ???
<div id="container">
    <div id="one"> 
        <input id="b1" value="Change the image order" onclick="change_order()" type="button"/>
       
        <h1 style="font-size: 12"> Header HeaderHeaderHeader</h1> 
        <p style="font-size:8"> text text text </p>
    </div>
    
    <div id="two">
       
        <img id="pict_01" src="https://www.khanacademy.org/images/topic-icons/math/doodling-in-math.png?v2" />
        <img id="pict_02" src="http://www.milldamschool.ik.org/img/d666f5fc-db14-11de-a689-0014220c8f46-5812526.jpg" />
        <img id="pict_03" src="http://www.birdsontheblog.co.uk/wp-content/uploads/2010/05/maths.jpg" />
        
    </div>
</div>

在CSS中，我放置了列和图像（静态位置）。事实上，我不确定onclick-buttum是否连接到JS。此处为完整代码http://jsfiddle.net/SantaUA/ovcheyfa/

这应该会让你走上正确的路线

$('img').on("click", function() {
  $(this).insertBefore( $(this).prev('img') );
});

这是一个JSFIDDLE

希望这能帮助

这很容易。您需要在javascript中获取元素的id，在本例中是图片，并更改其源代码或src
所以创建类似这个的东西

var firstpic = document.getElementById("pict_01");
firstpic.src = "secondpicture.jpg";

前面的代码将把第二个图像放在第一个图像中。只要对所有图片重复以下代码，你就会达到你的要求
希望这对有帮助

基本上，您想要做的是将所有图像放入一个数组中，然后打乱数组的顺序。更改数组的顺序后，可以将新数组输出回屏幕。

我举了一个例子向您展示如何使用jQuery正确地执行此操作。以下示例将在每次按下"无序播放我"按钮时随机播放图像。

注意，我将div的名称从id="two"更改为id="picContainer"。

HTML:

<div id="picContainer">
    <img id="pict_01" src="https://www.khanacademy.org/images/topic-icons/math/doodling-in-math.png?v2" />
    <img id="pict_02" src="http://www.milldamschool.ik.org/img/d666f5fc-db14-11de-a689-0014220c8f46-5812526.jpg" />
    <img id="pict_03" src="http://www.birdsontheblog.co.uk/wp-content/uploads/2010/05/maths.jpg" />
</div>

JS（jQuery）：

//grab the div that contains our images
var container = $('#picContainer');
//grab our button
var button = $('.shuffleMe');
//search through div and add all images to an array
var images = $(container).find('img');
//console out the images array
console.log('images: ', images);
//function to shuffle our array
//using the Fisher-Yates Shuffle.
//See https://github.com/coolaj86/knuth-shuffle
function shuffleArray(array) {
  var currentIndex = array.length, temporaryValue, randomIndex ;
  // While there remain elements to shuffle...
  while (0 !== currentIndex) {
    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}
//shuffle our image arrray and create a new array with random ordered images
var randomImages = shuffleArray(images);
//console out the images to we can see they changed order
console.log("random image: ", randomImages);
//empty our image container and
//append our images in a new random order 
//to the same container
function renderImages(array){
   $(container).empty();
   $.each(array, function( index, value ) {
      $(container).append(value);
   });
}

//call the renderImages function when our button is pressed
$(button).on("click", function(){
    //render the random images to the screen
    randomImages = shuffleArray(images);
    renderImages(randomImages);
});

我希望这能有所帮助。

http://codepen.io/anon/pen/zkoCl

相关文章：