Question

我正在使用此代码从a href：

中获取类值

<a href="" class="images/success.jpg">Click to get image</a>

<script>
$("#myMenu a").bind("click", function() {
  var myPic = $(this).attr("class");
  alert(myPic);
});
</script>

一切正常，顺畅。现在我正在使用fancybox加载图像，我有这个花哨的代码也能正常工作：

$.fancybox.open('images/success.jpg');

我正在尝试将变量myPic传递给fancybox代码，但我无法实现。

到目前为止，我已经尝试过这个：

$.fancybox.open(myPic);
$.fancybox.open('myPic');

是否有可能使其有效？

Answer 1

总是有更简单或更复杂的方法来实现相同的结果。拥有class="images/success.jpg"在语义上不合适。最简单的方法是将其放在href属性中，如：

<a class="fancybox" href="images/success.jpg">Click to get image</a>

...并使用class绑定像

这样的fancybox

$(".fancybox").fancybox();

...这也将确保您的链接无论是否启用javascript都可以访问（以及更多SEO友好。）

但是，您可能有自己的理由（我希望）通过变量或通过不同的属性（示例中为class）传递参考号。为了使您的代码更整洁，您可能更愿意使用（HTML5）data-*属性，如：

<a href="#nogo" data-path="images/success.jpg">Click to get image</a>

...并获取data-path属性的值，而无需设置变量并将其传递给fancybox，如：

$("#menu a").on("click", function() {
    $.fancybox.open($(this).data("path"));
});

注意使用需要jQuery 1.7 +的jQuery .on()方法

对于两个工作示例，请参阅 FIDDLE

来自var的Fancybox动态图像加载

1 个答案: