0

私はいくつかのリンクを持っており、誰かがそれらのリンクをクリックすると、いくつかの情報を含むポップアップが表示されます.そして、ユーザーがxをクリックすると閉じます.これを行うためにjqueryの表示と非表示を使用しました. リンクごとに情報が異なるため、同じことを繰り返しましたが、同じことを繰り返さない方法があることを知りたいです。このリンクは、私のコードがある jsbin に移動し、私が話していることを理解します。ありがとうございました。

4

3 に答える 3

1

IDと、同じクラスをクリックしているリンク、およびdiv IDのhrefを表示しようとしているdivを指定すると（これにより、アクセスしやすくなります）、次のように実行できます。

http://jsfiddle.net/GE6fX/1/

html

<a class="show" href="#zerotwo">link1</a>
<div id="zerotwo">
   <h1>Link heading <span>[close x]</span></h1>
   <p>blah</p>
</div>
<a class="show" href="#zerothree">link2</a>
<div id="zerothree">
   <h1>Link heading <span>[close x]</span></h1>
   <p>blah</p>
</div>

js

$('.show').click(function() {
    var showDiv = $($(this).attr('href'));
    showDiv.show();
    showDiv.find('h1 span').click(function() {
        showDiv.hide();
    });
});
于 2013-02-27T10:52:47.353 に答える
1

リンクから表示したいdivのクラスをなんらかの方法で渡す必要があります。これは、data-属性を使用する1つの方法です。ページにdivが1つしかない場合は、idである必要があります。

リンクを変更して、同じクラス'show'（より適切な名前を付けることができます）、クラスを指定したポップアップボタンclosepopup、およびポップアップのpopupいずれかをクリックするクラスがあり、表示されているすべてのポップアップが非表示になります。 （これは望ましい動作ではない可能性があります）

HTML

<body>
  <a class="show" data-popupid="zerotwo" href="#">link1</a>
  <a class="show" data-popupid="zerothree" href="#">link2</a>
    <div id="zerotwo" class="popup">
      <h1>Link heading <span class='closepopup'>[close x]</span></h1>
      <p>dhakshdakdhkhdahdlldhalksh</p>
    </div>
    <div id="zerothree" class="popup">
      <h1>Project completion report submission <span class='closepopup'>[close x]</span></h1>
       <p>dhakshdakdhkhdahdlldhalksh</p>
    </div>                    
</body>

Js

$(document).ready(function() {
  $('.show').click(function() {
    var popupClass = $(this).data('popupid');
    $('div#' + popupClass).show();
  });
  $('.closepopup').click(function() {
    $('div.popup').hide();
  });
});

divページ上に1つ配置し、クリックされたリンクのコンテンツまたはポップアップタイプを制御して、ポップアップのコンテンツをJSに動的に追加することで、これをすっきりさせることができます。

要件に応じて、これに対する多くのソリューション。

于 2013-02-27T10:59:24.977 に答える
0

これは複数の方法でクリーンアップできます。ここでは、ポップアップdivを1つだけ使用しており、代わりにクリックごとにコンテンツを設定しています。

http://jsbin.com/ovomaw/2/edit

または、ある種のテンプレートライブラリを使用して、ポップアップごとにドキュメントにhtmlを追加できます（これにより、一度に複数のポップアップを表示できるようになります）。

データがどこから来ているのかなどを詳しく知らなければ、適切なソリューションを決定するのは困難です。

于 2013-02-27T10:57:55.077 に答える