时间戳

首页 > 解决方案 > 按点击按钮的顺序显示图像

javascript - 按点击按钮的顺序显示图像

问题描述

我是网络开发的新手，并试图构建一个在单击按钮时显示不同标志的网站。

我在定位图像时遇到了一些问题...例如，当我单击“C -> A -> D -> B ->A”时，A标志出现在其他标志之前，我无法再次单击使其显示涨了两次。这是我的问题。

1）当我单击按钮时，图像按 的顺序显示，而不是我首先单击的按钮。有没有办法让第一次点击首先出现？

2) 如果我希望图像显示两次或更多次，我可以使用 CSS/javascript/JQuery 中的哪些函数或代码？

谢谢！

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>

<script>
function showImg( id ) {
        for ( i = 1; i < 10; i++) {
        }
        var obj = document.getElementById( "flag" + id );      
        if (obj != null)
            obj.className = 'show';
}


</script>
<style type="text/css">
    .hide{display:none;}
</style>


<input type="button" onclick="showImg(1)" value="A" >

<input type="button" onclick="showImg(2)" value="B">

<input type="button" onclick="showImg(3)" value= "C">

<input type="button" onclick = "showImg(4)" value= "D">

<input type="button" onclick = "showImg(5)" value= "E">

<input type="button" onclick = "showImg(6)" value= "ANS">

<div class="row">
		<div class="main">
			<div class="screen" position: relative">
				<img id="flag1" src="flag1.jpeg" title="1" class="hide" position="static">
			</div>
			<div position= "relative">
			    <img id="flag2" src="lag2.jpeg" title="2" class="hide">

            <div position= "relative">
			    <img id="flag3" src="flag3.jpeg" title="3" class="hide">
            </div>
            <div position= "relative">
			    <img id="flag4" src="flag4.jpeg" title="4" class="hide">
            </div>
            <div position= "relative">
			    <img id="flag5" src="flag5.jpeg" title="5" class="hide">
            </div>
		    <div position= "relative">
				<img id="flag6" src="flag6.jpeg" class="hide" position="static">
		    </div>
		</div>
	</div>
</div>

</body>
</html>

标签： javascripthtmlcss

解决方案

<img />解决该问题的一种方法是，在单击元素时插入相关元素，而不是隐藏和显示元素（这依赖于那些已经在 DOM 中的元素，然后根据需要显示和隐藏它们并保留它们的原始顺序）<button>。

在下面的 HTML 中，为了简化示例，我删除了大部分无关的 HTML，并将您的<input type="button" />元素转换为<button>元素，这允许这些元素包含 HTML 并允许我们在伪元素中使用生成的内容,::before和::after:

// here we select all <button> elements that have a "data-src"
// attribute:
const buttons = document.querySelectorAll('button[data-src]'),
    // creating a named function to handle inserting the
    // elements:
    insertImage = function() {
      // the 'this' is passed automatically from the later
      // use of EventTarget.addEventListener() method, here
      // we cache that within a variable:
      let clicked = this,

        // we retrieve the element, via its id, into which
        // we wish to append the elements:
        output = document.getElementById('gallery'),

        // we create an <img> element:
        image = document.createElement('img');

      // we use a template literal to set the 'src'
      // property-value to the 'https' protocol
      // coupled with the data-src attribute-value
      // retrieved via the Element.dataset API:
      image.src = `https://${clicked.dataset.src}`;

      // and append the <img> to the desired element:
      output.append(image);
    };

// here we iterate over the NodeList of <button> elements
// retrieved earlier, using NodeList.prototype.forEach():
buttons.forEach(
  // along with an Arrow function to the attach the
  // insertImage function (note the deliberate lack of
  // parentheses) via the EventTarget.addEventListener()
  // method:
  (btn) => btn.addEventListener('click', insertImage)
);
/*
  using the ::before pseudo-element, with generated
  content, to add text to the button elements that
  have a data-src attribute:
*/
button[data-src]::before {
  content: 'Show image ' attr(value);
}

#gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, 180px);
  grid-gap: 1em;
  align-content: center;
  justify-content: center;
}
<!--
  here we have three <button> elements, each with a data-src
  custom attribute that contains the src of the relevant image:
-->
<button type="button" value="A" data-src="i.stack.imgur.com/4CAZu.jpg"></button>

<button type="button" value="B" data-src="i.stack.imgur.com/SqYhm.gif"></button>

<button type="button" value="C" data-src="i.stack.imgur.com/a9xXV.png"></button>

<div id="gallery"></div>

推荐阅读