被未定义的函数粘住

Question

我对javascript很陌生，我就停留在这里:有一个较小的图像，它表示正常大小的img，单击它时，我想打开另一个div中的更大的图像，我还有其他的图像。

​

<li>
  <div>
    <span>
          <img onclick="cimgOpenning('ci-1')" src="resim/live-30.jpg" alt="asd" />
        </span>
  </div>
  <div>
    <div id="ci-1" class="cimg">
      <img src="resim/live-30.jpg" alt="" />
    </div>
  </div>
</li>
<li>
  <div>
    <span>
          <img onclick="cimgOpenning('ci-2')" src="resim/live-31.jpg" alt="asd" />
        </span>
  </div>
  <div>
    <div id="ci-2" class="cimg">
      <img src="resim/live-31.jpg" alt="" />
    </div>
  </div>
</li>
<script>
  function cimgOpenning(e) {
    if (document.getElementById(e).style.maxWidth == "0") {
      document.getElementById(e).style.maxWidth = "100px";
    } else {
      document.getElementById(e).style.maxWidth = "0";
    }
  }
</script>

​

我想要的是，当用户单击任何较小的图像时，都会打开自身的更大图像，但我会不断地得到未定义的错误。

EDİT:我好像在下面吵了一架，很抱歉。我尽力收集这部分的代码，但最好的是这一段：琴杆

代码有点混乱，但请耐心点。

Answer 1

要做到这一点，您可以尝试如下:小图像

      <span>
      <img onclick="cimgOpenning(this)" src="resim/live-30.jpg" alt="asd" />
      </span>

其他div显示更大的图像

      <div id="ci-2" style="display:none; width:100%" class="cimg">
      <img src="empty" alt="" />
      </div>

javascript

function cimgOpenning(e) {
var smallImageSrc = e.getAttribute("src");
var bigImageContainer = document.getElementsByClassName("cimg")[0];
var bigImage = bigImageContainer.getElementsByTagName("img")[0];
bigImage.src = smallImageSrc;
bigImageContainer.style.display = "block"
}

该函数将获取调用函数的任何小图像的src属性，然后将src设置为较大图像的src，并将较大图像容器的“显示无”替换为“显示块”样式，即它将显示它，这是希望这对您有所帮助吗？

Answer 2

我只是添加了一个背景，高度，和一个默认的最大宽度来查看变化。

我还颠倒了条件，因为document.getElementById(e).style.maxWidth从一个空字符串开始。如果它是空的或者是0，我把宽度设为100‘s。

​

.cimg {
  max-width: 0px;
  background: black;
  height: 100px;
}

<li>
  <div>
    <span>
      <img onclick="cimgOpenning('ci-1')" src="resim/live-30.jpg" alt="asd" />
    </span>
  </div>
  <div>
    <div id="ci-1" class="cimg">
      <img src="resim/live-30.jpg" alt="" />
    </div>
  </div>
</li>
<li>
  <div>
    <span>
      <img onclick="cimgOpenning('ci-2')" src="resim/live-31.jpg" alt="asd" />
    </span>
  </div>
  <div>
    <div id="ci-2" class="cimg">
      <img src="resim/live-31.jpg" alt="" />
    </div>
  </div>
</li>

<script>
  function cimgOpenning(e) {
    if (document.getElementById(e).style.maxWidth == "100px") {
      document.getElementById(e).style.maxWidth = "0px";
    } else {
      document.getElementById(e).style.maxWidth = "100px";
    }
  }
</script>

​