Question

我是javascript的初学者。对于这个项目，我们不能在这里使用jQuery。我喜欢右下方的矩形4个单元格作为缩略图，分别悬停时会触发显示不同的图像。

<div id="resistorContent">
            <section id="resistorDetail1" class="1stdetailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic1.jpg" alt=""></section>
            <section id="resistorDetail2" class="detailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic2.jpg" alt=""></section>
            <section id="resistorDetail3" class="detailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic3.jpg" alt=""></section>
            <section id="resistorDetail4" class="detailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic4.jpg" alt=""></section>

            <span class="closeButton"><a id="close" onclick="hideContent('resistorContent')">X</a></span>

            <ul>
                <li onmouseover="showDetailContent('resistorDetail1')" onmouseout="hideDetailContent('resistorDetail1')"></li>
                <li onmouseover="showDetailContent('resistorDetail2')" onmouseout="hideDetailContent('resistorDetail2')"></li>
                <li onmouseover="showDetailContent('resistorDetail3')" onmouseout="hideDetailContent('resistorDetail3')"></li>
                <li onmouseover="showDetailContent('resistorDetail4')" onmouseout="hideDetailContent('resistorDetail4')"></li>
            </ul>
        </div>
</section>


<script type="text/javascript">
        function showDetailContent(target) {
            document.getElementById(target).style.display = "block";
        }

        function hideDetailContent(target){
            document.getElementById(target).style.display = "none";
        }
    </script>

我喜欢做一些改进，因为这些单元格现在依赖onmouseout来关闭链接的<section>，以便它可以重新加载下一个<section>。如果我将鼠标从单元格移开，它将显示一个空白页面。

如何编写javascript以使其保持当前<section>并仅在悬停在其他单元格时加载其他<section>？

提前谢谢

http://jsfiddle.net/63L72trx/10/

Answer 1

让我们分析您想要做的简单句子：

＆＃34;当我显示另一个项目时，我想隐藏可能显示或不显示的其他项目。＆＃34;

所以，让我们删除隐藏元素的onmouseout并强制重置＆＃34;＆＃34;每当我们从onmouseover显示项目时确保隐藏所有项目的状态。

<div id="resistorContent">
  <section id="resistorDetail1" class="1stdetailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic1.jpg" alt=""></section>
  <section id="resistorDetail2" class="detailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic2.jpg" alt=""></section>
  <section id="resistorDetail3" class="detailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic3.jpg" alt=""></section>
  <section id="resistorDetail4" class="detailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic4.jpg" alt=""></section>
  <span class="closeButton"><a id="close" onclick="hideContent('resistorContent')">X</a></span>
    <ul>
      <li onmouseover="showDetailContent('resistorDetail1')"></li>
      <li onmouseover="showDetailContent('resistorDetail2')"></li>
      <li onmouseover="showDetailContent('resistorDetail3')"></li>
      <li onmouseover="showDetailContent('resistorDetail4')"></li>
    </ul>
  </div>
</section>

<script type="text/javascript">
  var children = document.querySelectorAll('#resistorContent > section[id]');
  function showDetailContent(target) {
    // Simply loop over our children and ensure they are hidden:
    for (var i = 0, child; child = children[i]; i++) {
      child.style.display = 'none';
    }
    // Now, show our child we want to show
    document.getElementById(target).style.display = 'block';
  }
</script>

这是一个工作小提琴：http://jsfiddle.net/rgthree/63L72trx/12/

javascript onmouseover / onmouseout保留以前的内容，直到悬停/触发下一个

1 个答案: