0

私はロゴ付きのページを作成し、シンプルなモーダルを使用してポップアップを表示し、クリックされたロゴに関する詳細情報を取得しています。

私はこの質問/回答に正しく従い、最初の2つのロゴを機能させることができました。 jQuery SimpleModal：同じページにある2つの異なるモーダルコンテンツ

ただし、先に進む前に、新しいウィンドウごとに新しい関数（＃basic-modal .basic、＃basic-modal .basic2など）を追加する必要がないようにする方法があるかどうかを知りたいと思います。私は約30個のロゴ（およびそれ以上）を持っているので、それぞれに1つではなく、すべてに1つの機能を作成することは可能ですか？

30 JS関数を使用する代わりに、ページの方が明確になります。

どうもありがとう！

4

1 に答える 1

0

次のようなことを試すことができます。

デモはこちら

HTML

<a href="#" class="infoLink" data-target="div1">Logo 1</a>
<a href="#" class="infoLink" data-target="div2">Logo 2</a>
<a href="#" class="infoLink" data-target="div3">Logo 3</a>
<a href="#" class="infoLink" data-target="div4">Logo 4</a>
<a href="#" class="infoLink" data-target="div5">Logo 5</a>

<div id="div1" class="infoDiv">Info About Logo 1 goes here...</div>
<div id="div2" class="infoDiv">Info About Logo 2 goes here...</div>
<div id="div3" class="infoDiv">Info About Logo 3 goes here...</div>
<div id="div4" class="infoDiv">Info About Logo 4 goes here...</div>
<div id="div5" class="infoDiv">Info About Logo 5 goes here...</div>

JS

$('.infoLink').bind('click', function(e){
    var $target = $('#'+$(this).data('target'));

    $target.modal({
        overlayClose:true
    });
});​

基本的に、各ロゴ ボックスはページ上で非表示になり、jQuery は data-target 属性を使用して、毎回どのロゴ ボックスを表示するかを決定します。そうすれば、ロゴごとにモーダルは必要なく、クリックされたリンクに基づいて情報をロードする 1 つのモーダルだけで済みます。

幸運を！

于 2012-05-31T22:00:50.237 に答える