javascript - 使用 css、jquery/javascript 数组或开关创建警报

Question

我正在做一些实验。所以这对这里的 JavaScript 专家来说可能看起来很糟糕。但我正在努力学习。

我有一个标题 div，当用户将鼠标悬停在每个缩略图上时，它会显示更大的图像。我使用 jQuery 来创建这种效果。标题 div 包含一个按钮。单击该按钮后，将弹出一个警报，告诉用户图像的艺术家名称。该按钮连接到段落的 ID。问题是，我的代码不工作。我不想使用“onclick”内联 javascript(这是我用来调用 showArtistname() 函数的)。我想要像 jQuery 那样不显眼的 javascript。我不知道该怎么做。我不知道我是否应该使用数组，或者我什至是否正确地接近了这个。好吧，这是不正确的，因为它不起作用...

这是我的 jQuery 代码:

$(function(){
$("a:has(img.small)").mouseover(function(){
var bigImage= $(this).attr("href");
$("#heading").attr({src: bigImage});
return false;
});

});

这是我的javascript代码:

function showArtistname(){ 

var a = document.getElementById   ("bluesails", "purplemountains", "bigsky", "nightlights", "fireysunset", "brilliantsunrise").innerHTML;


switch(a) {
case "bluesails":
    alert("Arthur MacKenzie")
    break
case "purplemountains":
    alert("Maggie Laing")
    break

case "bigsky":
    alert("Arthur MacKenzie")
    break

case "nightlights":
    alert("Aria Soriano")
    break

case "fireysunset":
    alert("Felix Buckley")
    break

case "brilliantsunrise":
    alert("Felix Buckley")

}
}

这是我的 HTML:

<div class="container_12" id="_container">

<div class="grid_12" id="12_header" > 

    <div class="hc_left_pic"> <img src="images/01_md.jpg" id="heading" alt="Big Image." />
 <div id="showImage" onclick="showArtistname()"></div>
  </a></div> 
</div>



<div class="clear"></div> 




<div class="grid_4" id="artist_container1">
<a href="images/01_md.jpg"><img src="images/01_sm.jpg" width="100" height="100" class="small" alt="Small image Blue Sails" /></a>    
    <p class="text" id="bluesails">Blue Sails</p>
</div>


<div class="grid_4" id="artist_container2">
<a href="images/02_md.jpg"><img src="images/02_sm.jpg" width="100" height="100" class="small" alt="Small Image Purple Mountains"/></a>
    <p class="text" id="purplemountains">Purple Mountains</p>
</div>


<div class="grid_4" id="artist_container3">
<a href="images/03_md.jpg"><img src="images/03_sm.jpg" width="100" height="100" class="small" alt="Small Image Big Sky"/></a>
    <p class="text" id="bigsky">Big Sky</p>
</div>


<div class="clear"></div>


<div class="grid_4" id="artist_container4">
<a href="images/04_md.jpg"><img src="images/04_sm.jpg" width="100" height="100" class="small" alt="Small Image Night Lights" /></a>
    <p class="text" id="nightlights">Night Lights</p>
</div>


 <div class="grid_4" id="artist_container5">
<a href="images/05_md.jpg"><img src="images/05_sm.jpg" width="100" height="100" class="small"  alt="Small Product Image Firey Sunset"/></a>
    <p class="text" id="fireysunset">Firey Sunset</p>
</div>


<div class="grid_4" id="artist_container6">
<a href="images/06_md.jpg"><img src="images/06_sm.jpg" width="100" height="100" class="small"  alt="Small Product Image Brilliant Sunrise"/></a>
    <p class="text" id="brilliantsunrise">Brilliant Sunrise</p>
</div>

这是我的 CSS:

.container_12 .grid_4 {
  width: 274px;
  height: 370px;
  background-color:#ccc;
  border: 3px solid #999;
  padding-left:10px;
  padding-right:10px;
  padding-bottom:10px;
 }


#showImage{
margin: -170px 20px 80px 700px;
width: 176px;
height: 48px;  
background:url(../images/showimage.jpg);
position:relative;
z-index:100;
}

 .grid_4 img {
position:relative;
left:100px;
top:20px;
padding:0 0 60px 0;
border:none;

}
.grid_4 p {
position:relative;
text-align:center;
}

p.text {
font-family:Arial, Helvetica, sans-serif;
font-size:.75em;
color:#000;
line-height:1.25em;
font-weight:bold;
}


#12_header {
display: inline;
background-color:#e5e5e5;
border: 3px solid #bfbfbf;
height:225px;
font-family:Arial, Helvetica, sans-serif;
font-size:;
color:#000;
font-weight:bold;
line-height:1.2em;

}


.hc_left_pic {
float:left; 
margin-top:15px;
background-color:#e5e5e5;
border: 3px solid #bfbfbf; 
width:935px;
height:250px;
}

我希望我已经提供了足够的信息来解决这个问题。

谢谢

Answer 1

在 jQuery 方面，您似乎需要学习一些东西，但我们都曾经做过，我看到您在上面尝试做的事情，并且您采用了几年前我会采用的相同方法。给我们一些代码干得好，它表明您不只是在找人做免费工作。干得好。

请参阅下面的 jsfiddle。

注意:
我删除了这些链接，因为它们完全多余(或者至少它们在您返回时是错误的；)。
我还注释掉了所有的 css。
http://jsfiddle.net/YAaFg/

玩得开心，

干杯
查理