Question

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

我的脚本如下：

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

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>

Answer 1

这里有几个问题。

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

解决这些问题并在遇到问题时发布另一个问题。

Answer 2

正如其他人指出的那样，代码存在一些问题。我试图让基本功能正常工作并稍微清理一下标记。您可以使用javascript或jQuery来完成此任务

方法一（javascript）

Demo

这是一种纯粹的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）

Demo 2

这是一种jQuery方式。同样不完整，这需要工作。

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

如果您遇到困难或需要帮助，请不要犹豫，向我们寻求帮助。：）

Answer 3

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

将switch语句与onMouseOver结合使用以显示文本＆amp;图像（javascript）

3 个答案:

方法一（javascript）

Demo

方法二（jQuery）

Demo 2