CSS 或 jQuery 来减少匹配 A HREF 和 IMG SRC？答案

【问题标题】：CSS or jQuery to cut down on matching A HREF and IMG SRC?CSS 或 jQuery 来减少匹配 A HREF 和 IMG SRC？
【发布时间】：2013-06-22 06:13:06
【问题描述】：

我管理着几个网站，对于缩略图（可能包括灯箱或花式框），这些行基本上是：

<a href="http://www.site.com/images/this-would-be-the-picture-we-want-x-full-size.jpg"><img src="http://www.site.com/images/this-would-be-the-picture-we-want-x-full-size.jpg"" width=200></a>

虽然我在删除绝对路径（太多人重新发布页面）或缩短文件名（有很多图片）方面没有余地，但有没有办法使用 CSS 或 JQUERY 来简单地调用全尺寸时点击而不必列出完整路径两次（一次在 A HREF 中，一次在 IMG SRC 中）

谢谢！

【问题讨论】：

为什么文件名的长度对你很重要？
但是如果图像已经是全尺寸的，为什么还需要链接呢？您确实意识到使用<img> 加载时图像实际上并没有调整大小，对吧？它们仅以较小的尺寸显示，但它们是全尺寸的。

标签： jquery html css image href

【解决方案1】：

使用 jQuery 很容易做到这一点 - 例如...

$('img').click(function(){

    window.location.href = $(this).attr('src');

});

但是，这只是模仿链接行为 - 您应该看看您的灯箱代码是如何工作的，它可能使用 <a> 链接作为触发器，可以使用上述方法绕过。

如果你想反过来做（只保留链接）我可能会在页面加载时做这样的事情。

$(document).ready(function() {

    $('a').each(function(){

        $(this).append('<img src="'+$(this).attr('href')+'" width="200">');

    });

});

但是，这将解决您页面上的每个 <a> 链接，因此您可能希望使用一个类来触发此行为。

【讨论】：

【解决方案2】：

如果我现在了解它的工作原理，并且如果 src 和 href 始终相等，那么

$("img").click(function() {
    window.location.href = this.src;
)};

【讨论】：