Блог

у меня есть div, который содержит 5 одинаковых изображений. я пытаюсь создать кнопку, которая может заставить одно из изображений исчезать одно за другим при нажатии. я пробовал стиль.видимость, но это заставляет их всех исчезать вместе. Это мой код

 document.getElementById("btn1").onclick = function() {
  document.getElementById("output").style.visibility = "hidden";
} 

 <input id="btn1" type="button" value="Click me" onclick="onClick1()" style="height: 100px; width: 100px;">
<div style="margin-top: 40px;"></div>
<div id="output">
  <img src="/images/person1.jpg">
  <img src="/images/person1.jpg">
  <img src="/images/person1.jpg">
  <img src="/images/person1.jpg">
  <img src="/images/person1.jpg">
</div> 

Вы нацеливаетесь на контейнер изображений, а затем скрываете его, чтобы все изображения исчезли сразу.

Из вашего вопроса не совсем ясно, хотите ли вы нажать кнопку один раз и изображения исчезнут, или нажать кнопку несколько раз и при каждом щелчке исчезает одно изображение. Это решение отвечает на первую проблему.

Если вы хотите скрыть изображения по одному, вам нужно будет использовать setInterval их или setTimeout управлять ими. В этом примере я использовал setTimeout .

 document.getElementById('btn1').onclick = function() {

  // Get all the images
  const images = Array.from(document.querySelectorAll('#output img'));

  // Loop over the images
  function loop(images) {

    // If there are images left remove the first one,
    // hide it, and then call the function again with the
    // reduced image array until all images are gone.
    if (images.length) {
      const image = images.shift();
      image.style.visibility = 'hidden';
      setTimeout(loop, 1000, images);
    }
  }
  loop(images);
} 

 <input id="btn1" type="button" value="Click me" onclick="onClick1()" style="height: 100px; width: 100px;">
<div style="margin-top: 40px;"></div>
<div id="output">
  <img src="https://dummyimage.com/30x30/000/fff">
  <img src="https://dummyimage.com/30x30/000/fff">
  <img src="https://dummyimage.com/30x30/000/fff">
  <img src="https://dummyimage.com/30x30/000/fff">
  <img src="https://dummyimage.com/30x30/000/fff">
  <img src="https://dummyimage.com/30x30/000/fff">
</div> 

Дополнительная документация

• shift
• setTimeout
• Array.from

Если вы хотите, чтобы изображения исчезали при каждом щелчке, кэшируйте изображения и возвращайте функцию, вызываемую прослушивателем при нажатии кнопки.

 const button = document.getElementById('btn1')
button.addEventListener('click', handleClick(), false);

// Cache the image elements, and then return a new
// function to your listener that removes an image on each click
function handleClick() {
  
  const images = Array.from(document.querySelectorAll('#output img'));

  return function() {
    if (images.length) {
      const image = images.shift();
      image.style.visibility = 'hidden';
    }
  }

} 

 <input id="btn1" type="button" value="Click me" style="height: 100px; width: 100px;">
<div style="margin-top: 40px;"></div>
<div id="output">
  <img src="https://dummyimage.com/30x30/000/fff">
  <img src="https://dummyimage.com/30x30/000/fff">
  <img src="https://dummyimage.com/30x30/000/fff">
  <img src="https://dummyimage.com/30x30/000/fff">
  <img src="https://dummyimage.com/30x30/000/fff">
  <img src="https://dummyimage.com/30x30/000/fff">
</div> 

1. Вы должны указать идентификатор тега изображения вместо родительского div.
2. Создана переменная, которая будет работать как счетчик.
3. При каждом щелчке увеличивайте счетчик и скрывайте конкретный тег изображения.

Ваш код будет выглядеть так:

 let imageToDelete = 1;
document.getElementById("btn1").onclick = function() {
  document.getElementById("image_"   imageToDelete).style.visibility = "hidden";
  imageToDelete  ;
} 

 <input id="btn1" type="button" value="Click me" onclick="onClick1()" style="height: 100px; width: 100px;">
<div style="margin-top: 40px;"></div>
<div>
  <img id="image_1" src="/images/person1.jpg">
  <img id="image_2" src="/images/person1.jpg">
  <img id="image_3" src="/images/person1.jpg">
  <img id="image_4" src="/images/person1.jpg">
  <img id="image_5" src="/images/person1.jpg">
</div> 

С помощью этого сценария все, что вы делаете, — это скрываете родителя всех изображений, в результате чего все изображения «кажутся исчезающими» сразу. Вы должны удалить каждый по отдельности, чтобы достичь желаемого результата.

 const RemoveImage = Event => {
  const Target = Event.target;
  const ImgPos = Target.getAttribute("data-remove");
  const Selector = `#image-parent > img:${ImgPos}-of-type`;
  const ImgToRemove = document.querySelector(Selector);
  if(!ImgToRemove) return false;
  ImgToRemove.parentElement.removeChild(ImgToRemove);
  return true;
};




const Buttons = document.querySelectorAll("button[data-remove]");
Buttons.forEach(btn => btn.addEventListener("click", RemoveImage)); 

 #image-parent > img:hover {
  filter: brightness(92%);
}
#first {outline: 2px solid #a00;}
#last {outline: 2px solid #0a0;} 

 <div id="image-parent">
  <img src="https://via.placeholder.com/70" id="first">
  <img src="https://via.placeholder.com/70">
  <img src="https://via.placeholder.com/70">
  <img src="https://via.placeholder.com/70" id="last">
</div>

<button data-remove="first">Remove first img</button>
<button data-remove="last">Remove last img</button> 

Если вы не хотите, чтобы изображения были полностью удалены, а просто скрыты:

• Дополните строку ImgToRemove.parentElement.removeChild(ImgToRemove); чем-то вроде ImgToRemove.classList.add("hidden-by-css");
• Затем объявите этот класс CSS с opacity: 0; pointer-events: none; помощью .

Мы знаем, что манипулирование HTML DOM не является популярным вариантом. Но это поможет решить вашу проблему.

 document.getElementById("btn1").onclick = function() {
  let imageNode = document.getElementById("output").getElementsByTagName('img')[0];
  imageNode.parentNode.removeChild(imageNode)
}
 

Я обнаружил, что использование методов queue() и dequeue() из библиотеки jQuery является очень хорошим вариантом для решения этих пошаговых сценариев. Об этом говорится в описании на официальной странице:

«Очереди позволяют асинхронно вызывать последовательность действий для элемента без остановки выполнения программы».

Я оставлю краткий пример того, как я реализовывал его в прошлом:

 $('#anchoredToElement')
     .queue("steps", function (next) {
        console.log("Step 1");
        //In case you want to hold the execution for a bit depending on the scenario you're running
        setTimeout(function () { console.log("Action within timeout") }, 500);
        next();
      })
      .queue("steps", function (next) {
        console.log("Step 2");
        setTimeout(function () {
            //Execution example
            UploadFile(fileUpload))
        }, 500);
        next();
            })
       .dequeue("steps");
 

Вот пример того, как я думаю, что логика может соответствовать вашим потребностям:

     var removeImage = function (index) {
        //Logic here to remove image within div according to passed index
    };

    var index = 0;
    $('#output')
        .queue("steps", function (next) {
            console.log("Remove Image 1");
            setTimeout(function () { removeImage(index); }, 250);
            index  ;
            next();
        })
        .queue("steps", function (next) {
            console.log("Remove Image 2");
            setTimeout(function () { removeImage(index); }, 250);
            index  ;
            next();
        })
        .queue("steps", function (next) {
            console.log("Remove Image 3");
            setTimeout(function () { removeImage(index); }, 250);
            index  ;
            next();
        })
        .queue("steps", function (next) {
            console.log("Remove Image 4");
            setTimeout(function () { removeImage(index); }, 250);
            index  ;
            next();
        })
        .queue("steps", function (next) {
            console.log("Remove Image 5");
            setTimeout(function () { removeImage(index); }, 250);
            index  ;
            next();
        })
    .dequeue("steps");
 

Конечно, вы можете улучшить код JS, так как я просто сосредоточился на пошаговом процессе.

Это лишь первый взгляд на то, как $.queue может помочь вам выполнить пошаговый процесс. Я рекомендую ознакомиться с документацией, чтобы узнать подробности, и при необходимости применить ее к своей логике.