1

私はこのコードを使用して、ahrefからクラス値を取得しています。

<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のコードも正常に機能します。

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

変数myPicをfancyboxコードに渡そうとしていますが、作成できません。

これまで私はこれを試しました：

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

それを機能させる可能性はありますか？

4

1 に答える 1

1

同じ結果を達成するには、常に簡単または複雑な方法があります。を持つことclass="images/success.jpg"は意味的に適切ではありません。これを行う最も簡単な方法は、次のhrefような属性内にそれを含めることです。

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

...そしてclassfancyboxを次のようにバインドするために使用します

$(".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"));
});​

.on()jQuery1.7以降を必要とするjQueryメソッドの使用に注意してください

両方の実用的な例については、このFIDDLEを参照してください

于 2012-11-17T20:05:37.663 に答える