1

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

<!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>
4

3 回答 3

2

当我做类似的事情时，我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>

于 2009-07-10T19:28:39.440 回答
0

您的代码中有许多错误，但您肯定正在努力让它工作。

您正在正确地考虑更改图像的“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.getElementById("someid") 的每个属性设置了一个变量，因为在浏览器中调用 DOM 函数真的很慢。

另外，像这样设置一个变量：

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

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

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

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

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

于 2009-07-10T20:12:40.973 回答
0

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

<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>
于 2009-07-10T23:36:48.630 回答