Question

我有一个select标签，每次加载页面时都会填充一个文件列表。每次在选择输入中单击一个图像时，我希望图像更改为所选文件。这就是我现在所拥有的，它无法正常工作。但是，单击它时，图像和文本应该是可见/隐藏的。任何帮助将不胜感激。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title> Table Edit The Shakespeare Studio </title>
    <link rel="stylesheet" type="text/css" href="../styles.css" />
</head>
<body>
<script language="javascript" type="text/javascript">
  function edit_image1()
  {
    if (document.getElementById('select1').value == "0") {
      document.preview1.style.visibility = "hidden";
      document.getElementById('random1').style.visibility = "visible";
    } else {
      var selected = document.getElementById('select1').options[document.getElementById('select1').selectedIndex].value;
      document.preview1.style.visibility = "visible";
      document.preview1.src = "../resources/uploads/"+selected;
      document.getElementById('random1').style.visibility = "hidden";
    }
  }
</script>
<div id="everything">
  <form action='tableEdit.php' method='GET'>
    <table border='1' id='cal'>
      <tr id='top'><td> Page Name </td><td> Image to Use </td><td> Preview </td></tr>
      <tr>
        <td> about </td>
        <td>
          <select name='aboutImage' id='select1' onchange='edit_image1()';>
            <option value='0' selected> RANDOM IMAGE</option> 
            <option value='IMG_6027.JPG'>IMG_6027.JPG</option> 
            <option value='IMG_6032.JPG'>IMG_6032.JPG</option> 
            <option value='kissme-1.jpg'>kissme-1.jpg</option> 
          </select>
        </td>
        <td>
          <img name='preview1' src='../resources/uploads/0'></img>
          <h3 id='random1'> Random </h3>
        </td>
      </tr>
    </table>
  </form>
</div>
</body>
</html>

Answer 1

当我做类似的事情时，我在脚本中创建了一个新的Image对象。您应该只需构建“<IMG>”元素并设置父级的innerHTML属性即可。

编辑：类似这样的事情：

<html>
<head>
    <title>Image Replacement Example</title>
</head>
<body>
<div id="imageHolder">
    <img src="http://stackoverflow.com/content/img/so/logo.png">
</div>
<br>
<button onClick="javascript:newImage();return false;">Click Me</button>

<script type="text/javascript">
    function newImage()
    {
        var holder = document.getElementById("imageHolder");
        holder.innerHTML = "<img src='http://serverfault.com/content/img/sf/logo.png'>"
    }
</script>

Answer 2

您的代码中存在许多错误，但您肯定会开始使用它。

你正在考虑改变图像的“src”值，这将正确显示，但要注意服务器必须连接并下载新图像。

使用相同的HTML，使用此javascript代码：

function edit_image(){
    var doc = document;
    var selectedIndex = doc.getElementById('select1').selectedIndex;
    var previewVisible = doc.getElementById("preview1").style.visibility;
    var randomVisible= doc.getElementById("random1").style.visibility; 

    if (selectedIndex === 0){
        previewVisible = "hidden";
        randomVisible = "visible";
    } else {
        var previewSrc = doc.getElementById("preview1").src;
        var selectValue = doc.getElementById('select1').options[selectedIndex].value;

        previewSrc = "../resources/uploads/"+ selectValue;
        previewVisible = "visible";
        randomVisible = "hidden";
    }

我认为这也是给你一些关于编写高效Javascript的技巧的好时机。我设置所有这些局部变量的原因是因为局部变量对于javascript来说比全局对象读取和交互更快。 “document”对象是全局范围的一部分，随着页面和函数的增长，对象的访问速度可能会变慢。

我还为document.getElementById（“someid”）的每个属性设置一个变量，因为在浏览器中调用DOM函数确实非常慢。

另外，设置如下变量：

var links = document.getElementsByTagName("A");

创建一个引用QUERY到DOM的变量， NOT 对包含页面上所有链接的数组的引用。因此，当您逐步执行以下操作时：

links.style.visibility = "visible";
links.innerHTML = "some new text";

您实际上最终会进行两次查询以获取页面上的每个锚点。

很抱歉，如果这是一次很多信息，但这个示例代码看起来像是一个很好的方法，可以为您提供更好的Javascript编写技巧，并帮助创建更好的互联网网页： - ）

Answer 3

您可以将图像路径存储在一个数组中，并将每个图像路径与选定的索引同步，如下所示：

<table border="1">
    <tr><td>Page Name</td><td>Image to Use</td><td>Preview</td></tr>
    <tr>
        <td>about</td>
        <td>
            <select id="select1">
                <option selected>RANDOM IMAGE</option> 
                <option>IMG_6027.JPG</option> 
                <option>IMG_6032.JPG</option> 
                <option>kissme-1.jpg</option> 
            </select>
        </td>
        <td>
            <img id="preview1" alt="image" src="0.JPG">
            <h3 id="random1">Random</h3>
        </td>
    </tr>
</table>

<script type="text/javascript">
var images = [];
var select1 = window.document.getElementById("select1");
var preview1 = window.document.getElementById("preview1");
var random1 = window.document.getElementById("random1");
var selectLength = select1.length;
images[0] = "0.JPG";
images[1] = "IMG_6027.JPG";
images[2] = "IMG_6032.JPG";
images[3] = "kissme-1.jpg";
function edit_image1() {
    var index = select1.selectedIndex;
    if (index !== 0) {
        preview1.src = images[index];
        random1.style.visibility = "hidden";
    } else {        
        preview1.src = images[Math.floor(Math.random() * selectLength)];
        random1.style.visibility = "visible";
    }
    return true;
}
select1.onchange = edit_image1;
</script>

基于SELECT更改图像SRC

3 个答案: