如何使用JavaScript根据变量值隐藏图像？_Javascript_Java_Html

如何使用JavaScript根据变量值隐藏图像？

javascript java html

如何使用JavaScript根据变量值隐藏图像？,javascript,java,html,Javascript,Java,Html,我试图用JavaScript在我的HTML页面中隐藏图像。我已经定义了一个函数hide1，它在页面加载时使用onload-in-body标记调用。函数hide1检查文件名的值，并根据其id隐藏图像特定标记。代码工作正常，直到其中一个if函数不满足。例如，如果filename1和filename 2为null，它将隐藏前2个图像，但如果filename 3不为null，filename 4再次为null，它将不隐藏图像4 <%@ page language="java" contentTy

我试图用JavaScript在我的HTML页面中隐藏图像。我已经定义了一个函数hide1，它在页面加载时使用onload-in-body标记调用。函数hide1检查文件名的值，并根据其id隐藏图像特定标记。代码工作正常，直到其中一个if函数不满足。例如，如果filename1和filename 2为null，它将隐藏前2个图像，但如果filename 3不为null，filename 4再次为null，它将不隐藏图像4

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<link href="css/lightbox.min.css" rel="stylesheet">

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Audit Evidence</title>
</head>
<body onload="hide1()">


<%String filename1 = (String)request.getAttribute("filename1"); %>
<%String filename2 = (String)request.getAttribute("filename2"); %>
<%String filename3 = (String)request.getAttribute("filename3"); %>
<%String filename4 = (String)request.getAttribute("filename4"); %>
<%String filename5 = (String)request.getAttribute("filename5"); %>
<%String filename6 = (String)request.getAttribute("filename6"); %>
<%String filename7 = (String)request.getAttribute("filename7"); %>
<%String filename8 = (String)request.getAttribute("filename8"); %>
<%String filename9 = (String)request.getAttribute("filename9"); %>
<%String filename10 = (String)request.getAttribute("filename10"); %>
<%String filename11 = (String)request.getAttribute("filename11"); %>
<%String filename12 = (String)request.getAttribute("filename12"); %>
<%-- 
<img src="/AuditEvidenceImages/<%=filename1%>" ><BR>
<%=filename1%><BR><BR>

<img src="/AuditEvidenceImages/<%=filename2%>" ><BR>
<%=filename2%><BR><BR>

<img src="/AuditEvidenceImages/<%=filename3%>" ><BR>
<%=filename3%><BR><BR> 

<img id="imgZoom" src="/AuditEvidenceImages/<%=filename1%>"><BR> --%>

<a href="/AuditEvidenceImages/<%=filename1%>" data-lightbox="AuditEvidence" data-title="first image"><img id="filename1" class="Evidence" src="/AuditEvidenceImages/<%=filename1%>" alt="" height="150px" width="150px"  /></a>
<a href="/AuditEvidenceImages/<%=filename2%>" data-lightbox="AuditEvidence" data-title="second image"><img id="filename2" class="Evidence" src="/AuditEvidenceImages/<%=filename2%>" alt="" height="150px" width="150px"/></a>
<a href="/AuditEvidenceImages/<%=filename3%>" data-lightbox="AuditEvidence" data-title="third image"><img id="filename3"  class="Evidence" src="/AuditEvidenceImages/<%=filename3%>" alt="" height="150px" width="150px"/></a>
<a href="/AuditEvidenceImages/<%=filename4%>" data-lightbox="AuditEvidence" data-title="fourth image"><img id="filename4" class="Evidence" src="/AuditEvidenceImages/<%=filename4%>" alt="" height="150px" width="150px"/></a>
<a href="/AuditEvidenceImages/<%=filename5%>" data-lightbox="AuditEvidence" data-title="fifth image"><img id="filename5" class="Evidence" src="/AuditEvidenceImages/<%=filename5%>" alt="" height="150px" width="150px"/></a>
<a href="/AuditEvidenceImages/<%=filename6%>" data-lightbox="AuditEvidence" data-title="sixth image"><img id="filename6" class="Evidence" src="/AuditEvidenceImages/<%=filename6%>" alt="" height="150px" width="150px"/></a>
<a href="/AuditEvidenceImages/<%=filename7%>" data-lightbox="AuditEvidence" data-title="seventh image"><img id="filename7" class="Evidence" src="/AuditEvidenceImages/<%=filename7%>" alt="" height="150px" width="150px"/></a>
<a href="/AuditEvidenceImages/<%=filename8%>" data-lightbox="AuditEvidence" data-title="eighth image"><img id="filename8" class="Evidence" src="/AuditEvidenceImages/<%=filename8%>" alt="" height="150px" width="150px"/></a>
<a href="/AuditEvidenceImages/<%=filename9%>" data-lightbox="AuditEvidence" data-title="ninth image"><img id="filename9" class="Evidence" src="/AuditEvidenceImages/<%=filename9%>" alt="" height="150px" width="150px"/></a>
<a href="/AuditEvidenceImages/<%=filename10%>" data-lightbox="AuditEvidence" data-title="tenth image"><img id="filename10" class="Evidence" src="/AuditEvidenceImages/<%=filename10%>" alt="" height="150px" width="150px"/></a>
<a href="/AuditEvidenceImages/<%=filename11%>" data-lightbox="AuditEvidence" data-title="eleventh image"><img id="filename11" class="Evidence" src="/AuditEvidenceImages/<%=filename11%>" alt="" height="150px" width="150px"/></a>
<a href="/AuditEvidenceImages/<%=filename12%>" data-lightbox="AuditEvidence" data-title="twelveth image"><img id="filename12" class="Evidence" src="/AuditEvidenceImages/<%=filename12%>" alt="" height="150px" width="150px"/></a>


<script src="js/lightbox-plus-jquery.min.js"></script>
   <script>


   function hide1() {


        if (<%=filename1%> == null) {
            document.getElementById("filename1").style.visibility = "hidden"; 
        }


        if (<%=filename2%> == null) {
            document.getElementById("filename2").style.visibility = "hidden";
        }


        if (<%=filename3%> == null) {
            document.getElementById("filename3").style.visibility = "hidden";
        }


        if (<%=filename4%> == null) {
            document.getElementById("filename4").style.visibility = "hidden";
        }


        if (<%=filename5%> == null) {
            document.getElementById("filename5").style.visibility = "hidden";
        }


        if (<%=filename6%> == null) {
            document.getElementById("filename6").style.visibility = "hidden";
        }


        if (<%=filename7%> == null) {
            document.getElementById("filename7").style.visibility = "hidden";
        }


        if (<%=filename8%> == null) {
            document.getElementById("filename8").style.visibility = "hidden";
        }


        if (<%=filename9%> == null) {
            document.getElementById("filename9").style.visibility = "hidden";
        }


        if (<%=filename10%> == null) {
            document.getElementById("filename10").style.visibility = "hidden";
        }


        if (<%=filename11%> == null) {
            document.getElementById("filename11").style.visibility = "hidden";
        }


        if (<%=filename12%> == null) {
            document.getElementById("filename12").style.visibility = "hidden";
        }
    }

    </script> 
</body>
</html>

这种方法有很多重复的代码。您可以创建一个文件名数组：-

var fileArray=[fileName1，fileName2，…]

迭代数组和下面的每个元素调用方法：-

function setImageVisibility(id) {
  var img = document.getElementById(id);
  img.style.visibility = (img == null) ? 'hidden' : 'visible';
}

或者更好

1迭代fileArray

2如果文件名为空-不要创建锚链接

这将大大减少代码。

过滤要隐藏的元素，然后执行隐藏？