使用纯JavaScript创建pic查看器时出现问题_Javascript

使用纯JavaScript创建pic查看器时出现问题

javascript

使用纯JavaScript创建pic查看器时出现问题,javascript,Javascript,我正在学校的一门课程中学习JavaScript的基础知识。这是因为当我深入到不同的库中时，我想对JavaScript有一个全面的了解我成功地创建了一个函数，它生成了一个，其中隐藏了一张图片（正如您所看到的，我用“纯”JavaScript欺骗了fadeIn函数）现在的问题是，我希望函数是动态的，并且可以为不止一个元素工作。我现在不知道如何处理这个问题任何帮助或想法都将不胜感激 <div id="hiddenElement"> <img src="#"

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

我成功地创建了一个函数，它生成了一个

，其中隐藏了一张图片（正如您所看到的，我用“纯”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';
            });


var hiddenElement=document.getElementById（'hiddenElement'）；
anchor.addEventListener（'click'，spawnImage，false）；
函数名为image（）{
$（hiddenElement）.fadeIn（'slow'，function（））{
hiddenElement.style.display='block'；
});

现在看起来是这样的：

您的意思是要统一此函数吗？然后您可以将div和back 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);
  }
});

$（文档）.ready（函数（）{
var spawnedElamants=getElementsByClassName（“spawn”）；
对于（var i=0；i检查：
<!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>


$（文档）.ready（函数（）{
var minImgs=document.getElementsByClassName（“minImg”）；
var maxImgs=document.getElementsByCassName（“maxImg”）；
var bkgFade=document.getElementById（'bkgFade'）；
对于（var i=0；iIm使用eventListener生成映像。我希望它可以用于多个元素。addEventListener（'click'，spawnImage，false）；我将尝试使此工作正常。否则，我将带着更多问题返回。感谢您的帮助和快速响应：）如果我有不同的图像，如何按照最佳实践将它们放入hiddenElement？是否可以以某种方式将最大值放入hiddenElement？因为“hiddenElement”-div是隐藏的，所以无论您如何将图像放入其中。
。对于所有设置了“maxImg”类的图像，请单击listener-DespownImage。