Question

我有一个缩略图列表。当用户单击一个小缩略图图像时，它会交换它以显示完整图像。我一直试图获取锚标记名称，以便我可以爆炸值i。但我无法让它发挥作用，任何想法？

我的javascript：

function swap(image) {
   document.getElementById("main").src = image.href;
}

我的HTML＆amp; PHP脚本：

<img id="main" src="images/main.jpg" width="226" height="226" alt="" />

<p><strong>Day <?php echo $i; ?>:</strong></strong><br /><?php echo $today[$i]; ?></p>
</div>
</div>

<?php
 for($i=1; $i<$day; $i++)
   {
     echo'<a href="images/prevDay-'.$i.'.jpg" name="day-'.$i.'" onclick="swap(this); return false;">';
     echo'<img src="images/thumbDay-'.$i.'.jpg" width="50" height="50" alt="" title="thumbDay-'.$i.'.jpg" /></a> ';
   }
?>

Answer 1

你最好给它一个ID，或者也可以。

然后在jQuery中访问（例如）：

$("#day-1")

或者没有jQuery，只需使用document.getElementById。

如果你真的想通过名字得到它：

$("a[name='day-1']")

Answer 2

假设您为缩略图设置了“缩略图”类，您可以

$(".thumbnail").click(function(){
   // $(this) refers to the clicked element
   $("#main").attr("src", $(this).attr("href"))

})

请注意attr()方法用作getter和setter

// getter:
$(selector).attr(attr_name) 

// setter
$(selector).attr(attr_name, attr_value)

您的PHP可以重写为：

// no need for <a> element
<?php
 for($i=1; $i<$day; $i++)
   {
     echo'<img class="thumbnail" src="images/thumbDay-'.$i.'.jpg" width="50" height="50" alt="" title="thumbDay-'.$i.'.jpg" />';
   }
?>

如何使用jQuery基于锚标签切换图像？

2 个答案: