JavaScriptからHTMLコンテンツを追加し、ボタンをHTMLでそれを変更

Question

をクリックして私はtwitch.tvオンラインストリームで働いている、と私はトラインだ：

1. HTMLコードを付加するにはHTMLのjavascriptから

2. javascriptから呼び出されるコンテンツをid = "followerInfo"のdivに配置し、ボタンを押すたびにコンテンツを変更するには（そのボタンで呼び出されるデータのタイプによって異なります）

   • 。ボタンをすべて押すと、オンライン - オンラインストリームとオフラインbtnでも同じように、すべてのテレビストリームを表示する必要があります
   • そして、私は独学（トラインよ..私はここにこだわっている

...私は、コードをコピー＆ペーストするだけではなく、ここでやっているかを理解することが、最も重要な'プログラマになる）と暗黙のうちにこの分野の初心者ですが、私はあなたに少し助けを求めているのです。ボタンをオフラインそれはあなたがここにある、より良い私のコードを理解するのに役立ちます場合は、オンラインボタンの

$("#followerInfo").prepend("<div class='row'>" + "<div class='col-md-4'>" + "<a href='" + ur_l + "' target='_blank'><img src='" + logo + "'></a>" + "</div>" + "<div class='col-md-4'>" + name + "</div>" + "<div class='col-md-4'>" + status + "</div></div>"); 

$("#followerInfo").prepend("<div class='row'>" + 
    "<div class='col-md-4'>" + "<a href='" + ur_l + 
    "' target='_blank'><img src='" + logo + "'></a>" + 
    "</div>" + 
    "<div class='col-md-4'>" + name + "</div>" + 
    "<div class='col-md-4'>" + status + "</div></div>"); 

ためのボタンすべて

$("#followerInfo").prepend("<div class='row'>" + "<div class='col-md-4'>" + "<a href='" + ur_l + "' target='_blank'><img src='" + logo + "'></a>" + "</div>" + "<div class='col-md-4'>" + name + "</div>" + "<div class='col-md-4'>" + status + "</div></div>"); 

ため

<div class="row second text-center"> 

    <div class="col-md-4 btn btn-info" id="all"> 
     All 
    </div> <!-- Online --> 
    <div class="col-md-4 btn btn-success" id="online"> 
     Online 
    </div> <!-- Online --> 
    <div class="col-md-4 btn btn-danger" id="offline"> 
     Offline 
    </div> <!-- Offline --> 

    </div> 

    <div id="followerInfo" style="margin-top:50px;"> 
    </div> 

コードペンのリンク

http://codepen.io/queky18/pen/BzbpwV

Answer 1

$('.second div').on('click', function(e) { 

     e.preventDefault(); 

     var status = $(this).attr('id'), // get the id of the status button clicked on. 
      followerRow = $('#followerInfo .row'), 
      statusColumn = $('#followerInfo .col-md-4:last-child'); 

    statusColumn.each(function(){// check the text in the last column of each row 

      if (status == "all") { // for the show all button. 
       followerRow.show(); 
      } else { 
       if ($(this).text().toLowerCase() != status) { // convert text to lowercase and compare with status 
        $(this).parent().hide(); // gets the parent div of the last column, which would be the row and hide it. 
       } else { 
        $(this).parent().show(); // otherwise we show the row. 
       } 
      } 
     }); 
    }); 

これはあなたの現在のコードで動作するはずですが、あなたは重複を見始める場合に述べたように、それが通過し、コードをファクタし直すおそらく時間の価値があります。 addEventListenerを、のappendChild：私はあなたのグーグル方向をアドバイスすることができますhttp://codepen.io/anon/pen/PzLALa