Question

我知道如何使用onclick或onMouseOver来显示图像，但是如何让每次点击不仅在同一个地方产生适当的图像，而且例如在一行中，在它之前的外观旁边？我的想法是这样的：我点击reference1并显示picture1。然后我点击reference2，图片2显示在已经显示的picture1旁边。现在我再次点击reference1，我希望连续看到图片1,2,1。我怎样才能做到这一点？我的理想是在填充时看到行滚动，并删除该行中的最后一个图像的删除按钮，甚至可以从文本字段中调出图片，但我可以自己搜索这些图片。我现在最关心的是new click = new image。谢谢。

Answer 1

假设这是相对简单的 - 您可以跟踪图像列表中的当前位置，然后创建一个处理当前图像的函数，然后递增此位置。让onClick事件调用此函数，就在那里。

使用JQuery的这个实例可以在这里查看： http://jsfiddle.net/8Q4LQ/

Answer 2

这是一个例子。

<html>
  <head>
    <style>
      .refimg { width: 100px; height: 100px; }
      .choices a { margin-right: 2ex; }
      .choices img { display: none; }
      #target { display:block; width: 500px; overflow-x: scroll; border: 1px solid black; }
    </style>
  </head>
<body>
  Choices:
  <div class="choices">
    <a href="#" onclick="return putImage(image1);">ref1</a>
    <a href="#" onclick="return putImage(image2);">ref2</a>
    <image id="image1" src="image1.gif" class="refimg" />
    <image id="image2" src="image2.gif" class="refimg" />
  </div>
  <br />
  Selections: <input type="button" value="Delete" onclick="delImage()" />
  <nobr id="target">
  </nobr>

  <script>
  function putImage(src) {
    var a = src.cloneNode(true);
    a.id = ''; //clear id to prevent duplicate id
    target.appendChild(a);
    a.scrollIntoView(true);
    return false;
  }
  function delImage() {
    var a=target.children;
    if (a.length>0) target.removeChild(a[a.length-1]);
  }
  target.style.height=((target.offsetHeight-target.clientHeight)+100)+'px'; //extend height for scroll bar
  </script>

  </body>
</html>

每次新点击都可以生成新图像吗？

2 个答案: