javascript - jqueryトグルを動的コンテンツで機能させる

Question

私のウェブサイトには次のコードがあります。http：//jsfiddle.net/dJLK3/1/ ご覧のとおり、問題なく動作します。

問題は、これらのdivとリンクトリガーがデータベースから取得されることです。今日は1つありますが、明日は10になる可能性があります...

link1、link2、link3、link4、link5などの多くのコードを正しくする必要なしにそれを変換して機能させる方法を理解することはできません...

誰？:)

Answer 1

dataattrとを使用しjQuery.dataます。参照

更新：このコメント
によると。

html

<div class="menu">
    <a href="#" class="link" data-slide-content="div1">Link1</a>
    <a href="#" class="link" data-slide-content="div2">Link2</a>
</div>
<div id="div1" class="slide"></div>
<div id="div2" class="slide"></div>​

js

$('.menu').on('click', '.link', function(){
    var id = $(this).data('slideContent');
    $('.slide').not('#' + id).slideUp(function() {
        $('#' + id).slideToggle();
    });
});

css

.slide {
    display: none;
    height: 100px;
    width: 100px;
    position: fixed;
    top: 30px;
}

デモ

参照：

• slideUp - http: //api.jquery.com/slideUp/
  
• slideToggle - http: //api.jquery.com/slideToggle/

Answer 2

アップデート

これが可能な答えのフィドルです-FIDDLE-更新-新しい要件があります

明確にするためにここに投稿されたコード

<div id='link_collection'>
    <a href="#" class="link">Link1</a>
    <a href="#" class="link">Link2</a>
</div>
<div id='div_collection'>
    <div class='div current'></div>
    <div class='div'></div>
</div>

$(document).ready(function() {
    $('#link_collection').on('click', '.link', function() {
        var divCollection = $('#div_collection .div'),
            index = $(this).index(), hasClickedMeAgain,
            current = divCollection.filter('.current');

        hasClickedMeAgain = current.index() === index;
        if (hasClickedMeAgain){
            current.slideToggle();
            return false;
        }
        current.slideUp(function() {
            $(this).removeClass('current');
            divCollection.eq(index).addClass('current').slideToggle();
        });
    })
});

この方法では、何もタグを保持する必要はありません。到着した順に div とリンクを挿入し続けるだけで、コードはそれ自体を処理します。ではごきげんよう。

Answer 3

これはうまくいきますか？それらすべてに同じクラス属性を使用します。そして、クリック イベントに割り当てる document.ready() に次のコードを追加します。

HTML:

<a class="ui-link-option">Link 1</a>
<a class="ui-link-option">Link 2</a>

<div class="ui-link-option-text">Text Here 1</div>
<div class="ui-link-option-text">Text Here 2</div>

Javascript:

$("a.ui-link-option").each(
  function (index) {
    var $this = $(this);
    $this.data("index", index);
    $this.bind("click", function(e) {
      var $this = $(this);
      var linkIndex = $this.data("index");
      $("div.ui-link-option-text").each(
        function (index) {
          if (index == linkIndex) {
            $(this).slideToggle();
          } else {
            $(this).hide();
          }
        }
      );
    });
  }
);