将 switch 语句与 onMouseOver 结合起来显示文本和图像（javascript）

发布于 2024-11-29 17:56:31 字数 2314 浏览 2 评论 0原文

我是 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>

原文

I'm new to javascript and am looking to add what I think is a relatively simple function to my website (still being worked on and not yet hosted). I've been known to be horribly wrong when it comes to what I think should be simple, though. :)

I have effects I'm adding to display the image, but I can apply those now, so that's not currently a problem.

The reference materials I have don't go into this explicitly, so please pardon the fact that I'm probably butchering some of the code (especially that in the switching statement).

I would like the action of hovering (or onMouseOver) of a link (on the same page, but not near the divs) to display an image in a div and a text box in a separate div below the image. Any help in straightening this out would be appreciated.

I have four links with the following IDs:

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

I have four images with the following IDs:

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

I have four text boxes with the following IDs:

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

I have assigned two local variables:

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

The script I have is as follows:

THE 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";
}

THE 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

女皇必胜 2024-12-06 17:56:31

这里有几个问题。

1) 这是无效的。您无法内联

<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">

如果您仍然遇到问题，请修复这些问题并发布另一个问题。

There are several things wrong here.

1) This is invalid. You can't inline a <script> tag.

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

2) You can't switch on two values in a switch statement, only one. This is wrong:

switch (varTX, varIM)

3) You can't have two elements with the same ID. That's invalid markup.

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

Fix these problems and post another question if you're still having trouble.

回复收藏 0 原文

蓝颜夕 2024-12-06 17:56:31

正如其他人指出的那样，代码存在一些问题。我尝试让基本功能正常工作并稍微清理一下标记。您可以使用 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;
})

如果您遇到困难或需要帮助，请随时向我们寻求帮助。 :)

As Others have pointed out there are a few issues with the code. I've tried to get the basic functionality working and clean up the markup a little. You can accomplish this with either javascript or jQuery

Method One (javascript)
Demo

This is a pure js way to do it. It's very incomplete so you'll have to work on it but this should give you a general idea of what you should be doing.

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];
}

Method Two (jQuery)
Demo 2

This is a jQuery way of doing it. Also incomplete, this will need work.

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

If you get stuck or need help along the way don't hesitate to ask us for help. :)

回复收藏 0 原文

隔岸观火 2024-12-06 17:56:31

也许这会让你开始，扔掉开关并使用 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/

perhaps this will get you started, tossing out the switch and use the 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>

and the 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);
    });
});

See it in action: http://jsfiddle.net/MarkSchultheiss/zah9X/

回复收藏 0 原文

~没有更多了~