1

我正在使用此代码从 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');

有没有可能让它发挥作用？

4

1 回答 1

1

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

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

...并使用class来绑定fancybox

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

...这也将确保您的链接可以访问，无论是否启用了 javascript（并且对 SEO 也更友好。）

但是，您可能有自己的理由（我希望）通过变量或不同的属性（class在您的示例中）传递 ref。为了使您的代码更整洁，您可能更喜欢使用 (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"));
});​

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

有关两个工作示例，请参见此 FIDDLE

于 2012-11-17T20:05:37.663 回答