如何更改HTML元素（圖片）的順序onlick

我是HTML/SCC/JC中的begginer，我嘗試自己解決。但這個人有太多的時間，我決定尋求幫助。說實話，我在互聯網上查找答案）如何更改HTML元素（圖片）的順序onlick

我需要通過點擊buttom改變圖像的順序，如何做到這一點？

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。的完整代碼here http://jsfiddle.net/SantaUA/ovcheyfa/

來源

2014-10-31 Nikolay

你必須要學習javascript我的朋友。檢查eloquentjavascript.net。 – 2014-10-31 01:23:50

這應該讓你右邊線

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

這裏是一個JSFIDDLE

希望這有助於

來源

2014-10-31 01:25:38 Parody

這是很容易的。您需要在JavaScript中獲取元素的id，這種情況下的圖片並更改其源或src。
因此，創建類似這

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

上面的代碼就會把第二圖像中的第一張圖像。只需對所有圖片重複以下代碼，即可實現您要求的內容。
希望這可以幫助

來源

2014-10-31 01:29:29 Bozic

基本上你想要做的是把所有的圖像放入一個數組，然後洗牌數組的順序。在更改數組的順序後，可以將新數組輸出回屏幕。

我已經彙集了一個示例來向您展示如何使用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

來源

2014-10-31 02:04:09 jjsquared

如何更改HTML元素（圖片）的順序onlick

回答

相關問題