Question

<%@ 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页面上传图片，我试图隐藏上传的图片和文本框。它是第一次点击图像，但是当我点击第二张图片时，这是隐藏但文本框不隐藏只有第一个文本框是隐藏。当我点击特定图像时，我可以隐藏图像和文本框。抱歉我的英语不好

Answer 1

 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隐藏文本框和图像

1 个答案: