如何简化数组 onchange 函数答案

【问题标题】：How to simplify array onchange function如何简化数组 onchange 函数
【发布时间】：2011-01-15 08:07:20
【问题描述】：

我在页面上有 3 个下拉菜单。用户选择后，它将更改图像和标题。下面是有效的 onLoad 函数的一部分。但是，我正在寻找一种将这 3 个基本相同的功能结合起来的解决方案。

我尝试了不同的方法将变量作为数组索引，例如myChoice[x].onchange 与 for(x in array) 等，但无法使其工作。

myChoice 是一个 Select 元素数组，从中提取图像和标题的必要值。 myThumb 是一个图像元素数组。 myDesc 是标题的 Span 元素数组。

非常感谢您提供好的意见。谢谢！

myChoice[0].onchange=function()
{
jpgfile=this.value;
filechar=jpgfile.length-3;
短文件=jpgfile.substr(filechar,3);
myThumb[0].src=bp+'truffle'+shortfile+'.jpg';
captext=shortfile.substr(2,1);
myDesc[0].innerHTML=caption[captext];
}

myChoice[1].onchange=function()
{
jpgfile=this.value;
filechar=jpgfile.length-3;
短文件=jpgfile.substr(filechar,3);
myThumb[1].src=bp+'truffle'+shortfile+'.jpg';
captext=shortfile.substr(2,1);
myDesc[1].innerHTML=caption[captext];
}

myChoice[2].onchange=function() {
jpgfile=this.value;
filechar=jpgfile.length-3;
短文件=jpgfile.substr(filechar,3);
myThumb[2].src=bp+'truffle'+shortfile+'.jpg';
captext=shortfile.substr(2,1);
myDesc[2].innerHTML=caption[captext]; }

带有建议功能的完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
img.choicePic {
display:block;
}
h1 {
font-family:arial, Verdana, tahoma;
font-size:17pt;
text-align:center;
display:block;
}
#caption0, #caption1, #caption2 {
font-family:arial, Verdana, tahoma;
font-size:7pt;
text-align:left;
display:block;
}
</style>
<script type="text/javascript">

function setPicCap() {

var caption=['Select your chocolate',
'Flavors from India: nutmeg and subtle spices, in milk chocolate, dusted with cinnamon. ',
'Caribbean flavors of rum and butter mingle in a creamy center, dipped in dark chocolate. ',
'Dark chocolate truffle center, dipped in dark chocolate with white chocolate stripes. ',
]; // This will be your images description




var bp='images/store/', //base url of your images
imgnum=3; //Number of your images. This should match on your comboboxes options.

var myThumb=new Array(3), myDesc=new Array(3), myChoice=new Array(3);

for (i=0; i<imgnum; i++) {

numChoice=i.toString();
imgChoice="thumb"+numChoice;
capChoice="caption"+numChoice;
selectChoice="selection"+numChoice;

imgChoice=document.getElementById(imgChoice); //Image element. Use .src to view specific.
myThumb[i]=imgChoice;


capChoice=document.getElementById(capChoice); //Span element. Place holder. No value.
myDesc[i]=capChoice;

selectChoice=document.getElementById(selectChoice); //Select element. Use innerHTML to view specific.
myChoice[i]=selectChoice;

}

function updateThumb(index, jpgfile){
shortfile = jpgfile.substr(jpgfile.length - 3,3);
myThumb[index].src = bp + 'truffle' + shortfile + '.jpg';
captext = shortfile.substr(2,1);
myDesc[index].innerHTML = caption[captext];
}

for(var j = 0; j < myChoice.length; j++){
var idx = j;
myChoice.onchange = function(){
updateThumb(idx, this.value);
}
}
}


</script>
</head>
<body onLoad="setPicCap()">
<center>
<h1>Build Your Computer Test Script</h1>
</center>
<table width="800" align="center">
<tr>
<td><img src="images/store/select_a_chocolate.png" alt="Mukilteo Choclate Truffle" border="0" id="thumb0" class="choicePic"></td>
<td><select id="selection0" name="truffle">
<option value="0" selected >Select Your Chocolate</option>
<option value="Square0: BANGALORE SPICE Item 001|BANGALORE SPICE Item 001">BANGALORE SPICE Item 001</option>
<option value="Square0: BUTTERED RUM Item 002|BUTTERED RUM Item 002">BUTTERED RUM Item 002</option>
<option value="Square0: CLASSIC DARK CHOCOLATE Item 003|CLASSIC DARK CHOCOLATE Item 003">CLASSIC DARK CHOCOLATE Item 003</option>
</select>
<br></td>
</tr>
<tr>
<td colspan="2"><span id="caption0"></span></td>
</tr>
</table>
<br>
<br>
<br>
<table width="800" align="center">
<tr>
<td><img src="images/store/select_a_chocolate.gif" alt="Mukilteo Choclate Truffle" border="0" id="thumb1" class="choicePic"></td>
<td><select id="selection1" name="truffle">
<option value="0" selected >Select Your Chocolate</option>
<option value="Square1: BANGALORE SPICE Item 001|BANGALORE SPICE Item 001">BANGALORE SPICE Item 001</option>
<option value="Square1: BUTTERED RUM Item 002|BUTTERED RUM Item 002">BUTTERED RUM Item 002</option>
<option value="Square1: CLASSIC DARK CHOCOLATE Item 003|CLASSIC DARK CHOCOLATE Item 003">CLASSIC DARK CHOCOLATE Item 003</option>
</select>
<br></td>
</tr>
<tr>
<td colspan="2"><span id="caption1"></span></td>
</tr>
</table>
<br>
<br>
<br>
<table width="800" align="center">
<tr>
<td><img src="images/store/select_a_chocolate.jpg" alt="Mukilteo Choclate Truffle" border="0" id="thumb2" class="choicePic"></td>
<td><select id="selection2" name="truffle">
<option value="0" selected >Select Your Chocolate</option>
<option value="Square2: BANGALORE SPICE Item 001|BANGALORE SPICE Item 001">BANGALORE SPICE Item 001</option>
<option value="Square2: BUTTERED RUM Item 002|BUTTERED RUM Item 002">BUTTERED RUM Item 002</option>
<option value="Square2: CLASSIC DARK CHOCOLATE Item 003|CLASSIC DARK CHOCOLATE Item 003">CLASSIC DARK CHOCOLATE Item 003</option>
</select>
<br></td>
</tr>
<tr>
<td colspan="2"><span id="caption2"></span></td>
</tr>
</table>
</body>
</html>

【问题讨论】：

标签： javascript arrays onchange

【解决方案1】：

function updateThumb(index, jpgfile){
    shortfile = jpgfile.substr(jpgfile.length - 3,3);
    myThumb[index].src = bp + 'truffle' + shortfile + '.jpg';
    captext = shortfile.substr(2,1);
    myDesc[index].innerHTML = caption[captext];
}

for(var i = 0; i < myChoice.length; i++){
    var idx = i;
    myChoice.onchange = function(){
        updateThumb(idx, this.value);
    }
}

【讨论】：

感谢 Scrum 大师的快速响应。它看起来很有希望，但没有奏效。我不知道为什么。我正在考虑在传递数组索引的每个 Select 标记中执行 onchange，而不是从 onLoad 调用。我在原始问题中添加了整个代码。

【解决方案2】：

给你：

function setPicCap() {
function a(a, d) {
    shortfile = d.substr(d.length - 3, 3), e[a].src = c + "truffle" + shortfile + ".jpg", captext = shortfile.substr(2, 1), f[a].innerHTML = b[captext]
}
var b = ["Select your chocolate", "Flavors from India: nutmeg and subtle spices, in milk chocolate, dusted with cinnamon. ", "Caribbean flavors of rum and butter mingle in a creamy center, dipped in dark chocolate. ", "Dark chocolate truffle center, dipped in dark chocolate with white chocolate stripes. "],
    c = "images/store/",
    d = 3,
    e = Array(3),
    f = Array(3),
    g = Array(3);
for (i = 0; d > i; i++) numChoice = i + "", imgChoice = "thumb" + numChoice, capChoice = "caption" + numChoice, selectChoice = "selection" + numChoice, imgChoice = document.getElementById(imgChoice), e[i] = imgChoice, capChoice = document.getElementById(capChoice), f[i] = capChoice, selectChoice = document.getElementById(selectChoice), g[i] = selectChoice;
for (var h = 0; g.length > h; h++) {
    var j = h;
    g.onchange = function () {
        a(j, this.value)
    }
}
}

【讨论】：