结合switch语句和onMouseOver显示文本&图像(javascript)

Combining switch statement with onMouseOver to display text & image (javascript)

本文关键字：图像 javascript 文本 显示 switch 语句 onMouseOver 结合      更新时间：2023-09-26

我是javascript的新手，我希望添加我认为是一个相对简单的功能到我的网站(仍在工作，尚未托管)。然而，当谈到我认为应该简单的事情时，我已经知道了可怕的错误。:)

我要添加一些效果来显示图像，但我现在可以应用这些效果，所以目前这不是问题。

我所拥有的参考资料并没有明确地讨论这一点，所以请原谅我可能会删除一些代码(特别是在切换语句中)。

我想悬停(或onMouseOver)的链接(在同一页面上，但不是在div附近)的动作显示一个图像在一个div和文本框在单独的div下面的图像。如果你能帮我解决这个问题，我将不胜感激。

我有四个链接，id如下:

 #btn_a;
 #btn_b;
 #btn_c;
 #btn_d;

我有四个图像，它们的id如下:

#img_a = "img/ima.jpg";
#img_b = "img/imb.jpg";
#img_c = "img/imc.jpg";
#img_d = "img/imd.jpg";

我有四个文本框，id如下:

#txt_a = "Aaaa";
#txt_b = "Bbbb";
#txt_c = "Cccc";
#txt_d = "Dddd";

我赋值了两个局部变量:

var varTX; // text
var varIM; // images

脚本如下:

JAVASCRIPT 

function textBox(varTX){
var varTX=new text();
switch (varTX)
{
case 1: btn_a.onMouseOver: var varTX = "txt_a";
break;
case 2: btn_b.onMouseOver: var varTX = "txt_b";
break;
case 3: btn_c.onMouseOver: var varTX = "txt_c";
break;
case 4: btn_d.onMouseOver: var varTX = "txt_d";
break;
default: varTX = "no text";
}
function textBox(varIM){
var varIM=new image();
switch (varIM)
{
case 1: btn_a.onMouseOver: var varIM = "img_a";
break;
case 2: btn_b.onMouseOver: var varIM = "img_b";
break;
case 3: btn_c.onMouseOver: var varIM = "img_c";
break;
case 4: btn_d.onMouseOver: var varIM = "img_d";
break;
default: varIM = "no image";
}
HTML 

<html>
<head>
<script type="text/javascript"></script>
</head>
<body>
<div id="target"><ul>
<li><a href="#" id="btn_a">test_a</a></li>
<li><a href="#" id="btn_b">test_b</a></li>
<li><a href="#" id="btn_c">test_c</a></li>
<li><a href="#" id="btn_d">test_d</a></li>
</ul></div>
<div class="images">
<a href="#">
<img src=<script>textBox("varIM")</script>
width="100%" height="30%" class="latest_img" /></a>
</div>
<div class="images">
<a href="#">
<h3 width="100%" height="30%" class="latest_img" />
<script>textBox("varTX")</script>
</h3></span></a>
</div>
</body>
</html>

这里有几处错误。

1)无效。不能内联<script>标记

<img src=<script>textBox("varIM")</script>
width="100%" height="30%" class="latest_img" />`

2)你不能在一个switch语句中打开两个值，只能打开一个。这是错误的:

switch (varTX, varIM)

3)不能有两个具有相同ID的元素。这是无效的标记。

<div id="images">
...
<div id="images">

修复这些问题，如果你仍然有问题，请发布另一个问题。

正如其他人指出的那样，代码存在一些问题。我已经尝试让基本功能工作，并清理标记一点。您可以使用javascript或jQuery来完成此操作

方法一(javascript)

演示

这是一种纯js的方式。它还很不完整，所以你们还得继续努力，但这应该能给你们一个大致的概念，让你们知道应该怎么做。

var links = document.getElementById("target").getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
{
    links[i].onclick = function(){replaceImage(this); return false;}
}
function replaceImage(obj)
{
    document.getElementById("imagesI").src = "img_" + obj.id.split("_")[1];
    document.getElementById("imagesT").innerText = "txt_" + obj.id.split("_")[1];
}


方法二(jQuery)

演示2

这是一种jQuery的方法。这也是不完整的，还需要工作。

$("#target a").click(function(){
    $("#imagesI").attr("src", "img_" + this.id.split("_")[1]);
    $("#imagesT").html("txt_" + this.id.split("_")[1]);
    return false;
})


如果你在路上遇到困难或需要帮助，请不要犹豫，向我们寻求帮助。:)

也许这会让您开始使用jquery:

<div id="target"><ul> <li><a href="#" id="btn_a">test_a</a></li> <li><a href="#" id="btn_b">test_b</a></li> <li><a href="#" id="btn_c">test_c</a></li> <li><a href="#" id="btn_d">test_d</a></li> </ul></div>  <div id="images"> <a href="#"> <img src='' width="100%" height="20px" class="latest_img" /></a> </div>  <div id="imagestext"> <a href="#"> <h3 width="100%" height="30%" class="latest_img" >  </h3></span></a> </div> <div id='meme'>empty</div>

和jquery:

$('#target').find('a').hover(function() {
    var iamover = $(this).text();
    $('#meme').text(iamover);
    $('#images').find('img', function() {
        $(this).attr('alt', iamover);
        $(this).attr('src', 'myimage.jpg');
    });
    $('#imagestext').find('a>h3', function() {
        $(this).text(iamover);
    });
});

实际操作:http://jsfiddle.net/MarkSchultheiss/zah9X/

相关文章：