您需要搜索的是 Javascript 中的 DOM 操作。這是一個(gè)簡(jiǎn)單的方法來(lái)做你所要求的。我試圖盡可能地解釋它。
<html>
<body>
<div id="animals">
<img src="cat.jpg" id="cat">
<img src="dog.jpg" id="dog">
<img src="frog.jpg" id="frog">
</div>
</body>
<script>
// animals variable here is a NodeList which is kind of like Array,
// but it is not enumerable (you cannot loop over it).
var animals = document.querySelectorAll('#animals > *');
// Here we convert it to an actual Array.
var animalsArray = Array.from(animals);
// We are going to add click listeners on every single of them.
animalsArray.forEach(function (animal) {
// Add an event listener to this img element.
animal.addEventListener(
// The listener should observe click events.
'click',
// The listener will call this function
// when a click event is triggered.
function (event) {
// This is the order number of the clicked animal image.
// Assuming that you have 3 images on the page, this number
// will be 0, 1 or 2.
// 0 marking the image as the first of rest, and 2 marking it
// as the last of them.
var positionOfThisAnimal = animalsArray.indexOf(this);
// animalsArray.length will give you the number of images in
// the `animalsArray` Array.
// If the position of the clicked animal image is smaller than
// the highest it can be (which is `2` for 3 images), it is not
// the last one, and we will alert the user with a message.
if (positionOfThisAnimal < animalsArray.length - 1) {
alert("Don't click me! Click the frog.");
// Because all we have to do for these not-the-last-one
// images is to alert the user, we are returning a void
// (empty) result here which effectively stops the function
// from executing the rest of the lines we have below.
return;
}
// Here we are taking the clicked animal image (which is the
// last one in the list) and we are moving it to the first
// place in the div with ID "animals".
document.querySelector('#animals').prepend(this);
},
// This `false` means the listener should not be marked as passive.
//
// Passive listeners are asynchronous, meaning that the browser
// will *not* wait for your function to complete executing before
// continuing to wait for other user inputs like mouse moves or
// keyboard strokes.
//
// The browser will wait for active listeners. This has a downside
// though. If your function takes too long to complete, the user
// will notice that their browser (or just the current tab) freezes
// and won't let user interact with the page until the execution
// is completed.
false,
);
});
</script>
</html>
