用纯JavaScript创建图片查看器有问题

Problem creating pic-viewer with pure JavaScript

本文关键字：有问题 JavaScript 创建 用纯      更新时间：2023-09-26

我正在学校的课程中学习JavaScript的基础知识。这是因为当我深入研究不同的库时，我想对JavaScript有一个很大的了解。

我已经成功地创建了一个函数，生成一个<div>，其中隐藏着一张图片(我欺骗了"纯"JavaScript与fadeIn函数，如你所见)。

现在的问题是，我想要的函数是动态的，工作不止一个元素。我不知道该如何处理这个问题。

任何帮助或想法将不胜感激。

    <div id="hiddenElement">
        <img src="#" alt="image" class="maxImg"/>
    </div>
    var hiddenElement = document.getElementById('hiddenElement');
    anchor.addEventListener('click', spawnImage, false);

    function spawnImage() {
            $(hiddenElement).fadeIn('slow', function() {
                hiddenElement.style.display = 'block';
            });

现在看起来像这样:http://oscarlandstrom.se/javascript/pic.html

您的意思是要统一这个功能吗?然后，您可以将div和返回id作为函数参数传递:

function spawnImage(divId, backId) {
            $(divId).fadeIn('slow', function() {
                document.getElementById('divId').style.display = 'block';
            });
            $(backId).fadeIn('slow', function() {
                document.getElementById('backId').style.display = 'block';
            });

当你加载页面时调用这样的东西:

spawnImage(fistDivId, backId);
spawnImage(secondDivId, backId);

所以你可以设置class="spawn"为你想要你的函数持有的所有元素。(class="spawn" -这是一个空类，只用于标记元素)。然后你应该像这样设置加载事件:

$(document).ready(function() {
  var spawnedElamants = getElementsByClassName("spawn");
  for(var i=0; i<spawnedElamants.length; i++)
  {
    spawnImage(spawnedElamants[i].id, backId);
  }
});

检查:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="sheet.css" />
        <script src="js.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    </head>
    <body>
        <div id="bkgFade"></div>
        <div id="container">
            <div class="imgWrap">
                <img src="http://www.morrharet.se/images/morrharet.jpg" alt="image" id="anchor" class="minImg"/>
            </div>
            <div class="imgWrap">
                <img src="http://www.morrharet.se/images/morrharet.jpg" alt="image" id="anchor2" class="minImg"/>
            </div>
        </div>
        <div id="hiddenElement">
            <img src="http://www.morrharet.se/images/morrharet.jpg" alt="image" class="maxImg"/>
        </div>
    </body>
</html>
<script type="text/javascript">
    $(document).ready(function() {
        var minImgs = document.getElementsByClassName("minImg");
        var maxImgs = document.getElementsByClassName("maxImg");
        var bkgFade = document.getElementById('bkgFade');
        for(var i=0; i<minImgs.length; i++)
        {
            minImgs[i].addEventListener('click', spawnImage, false);    
        }
        for(var i=0; i<maxImgs.length; i++)
        {
            maxImgs.addEventListener('click', despawnImage, false);
        }
        }
    )
    function spawnImage() {
        $(hiddenElement).fadeIn('slow', function() {
            hiddenElement.style.display = 'block';
        });
        $(bkgFade).fadeIn('slow', function() {  
            bkgFade.style.display = 'block';
        });
    }
    function despawnImage() {
        $(hiddenElement).fadeOut('slow', function() {
            document.getElementById('hiddenElement').style.display = 'none';
        });
        $(bkgFade).fadeOut('slow', function() {
            document.getElementById('bkgFade').style.display = 'none';
        });
    }
</script>
相关文章：