个人中心
gpt4 book ai didi

javascript - 使用javascript隐藏文本框和图像

转载 作者：行者123 更新时间：2023-11-28 08:19:47 27 4
gpt4 key购买 nike 

<%@ 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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<style>
  .thumb {
    height: 150px;
    width: 150px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;

    }
    ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.img-list li {
  display: inline-block;
  height: 150px;
  margin: 0 1em 1em 0;
  position: relative;
  width: 150px;
}


span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 152px;
  left: 0px;

  position: absolute;
  top: 10px;
  width: 152px;
  opacity: 0;
}

ul.img-list li:hover span.text-content {
  opacity: 1;
}
 </style>

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
function hide(images)
{
images.style.width="0px";
images.style.visibility="hidden";
var te=document.getElementById("un");
//document.getElementById("t1").style.visibility="hidden";
te.style.visibility="hidden";
}
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

   // Loop through the FileList and render image files as thumbnails.
   for (var i = 0, f; f = files[i]; i++) {

     // Only process image files.
     if (!f.type.match('image.*')) {
       continue;
     }

     var reader = new FileReader();

     // Closure to capture the file information.
     reader.onload = (function(theFile) {
       return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<span id="s" style="display:inline-block; width: 300px;" ><ul id="un" class="img-list"><li onclick="hide(this)"><img id="img" class="thumb" src="', e.target.result,
                        '" title=" click this image for deselect" /><span class="text-content"><span>Click here to Deselect</span></span></li><input type="text" id="t1" ></ul></span>'].join('');

          document.getElementById('list').insertBefore(span, null);
    };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);

 </script>
 <script type="text/javascript">
 function printing()
 {
    document.getElementById("files").style.visibility="hidden";
    document.getElementById("p").style.visibility="hidden";
    window.print();
    document.getElementById("files").style.visibility="visible";
    document.getElementById("p").style.visibility="visible";
    }
 </script>
 <input type="button" id="p" value="print" onclick="printing();">
</body>
</html>

上面的代码我用来在Jsp页面中上传图像，我试图隐藏上传的图像和文本框。我第一次单击图像时它有效，但当我单击第二个图像时。它是隐藏的，但文本框不隐藏，只有第一个文本框是隐藏的。当我单击特定图像时，我可以做什么来隐藏图像和文本框。抱歉我的英语不好

最佳答案 

 function hide(images)
{
   images.style.width="0px";
   images.style.visibility="hidden";

   var txt=$(images).parent().find("input[id='t1']");
   txt.hide();
}

或者以下也可以

function hide(images)
{
  $(images).parent().hide();
}

希望这对您有帮助。

关于javascript - 使用javascript隐藏文本框和图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23133148/

27 4 0
文章推荐： c++ - 在其他计算机 C++ 中运行包含 MFC 类的 Dll
文章推荐： c++ - 使用 boost::asio 执行单播消息传递
文章推荐： c++ - 如何在 C++ 中使用 gpmlib 提取以 10 为底的尾数和指数
文章推荐： ios - 检查数组是否包含 Swift 中的索引值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com