2

新しいツイートが上部に追加され、古いツイートがプッシュダウンされるツイートストリームがあります。ツイート全体をクリックすると、パネルが下にスライドして、「返信」、「リツイート」、「お気に入り」などが表示されます。パネルは、ストリームに追加された新しいツイートごとに追加されます。

以下のコードは機能します。これは、1回の呼び出しだけが行われるように書く方がよいのではないでしょうか。または、新しいツイートが追加されたときに。div＃tc4、ul＃tb4などを使用してコードに追加する必要がありますか？

$(document).ready(function () {
    $("div#tc1").click(function () {
        $("ul#tb1").slideToggle("fast");
    });
    $("div#tc2").click(function () {
        $('ul#tb2').slideToggle("fast");
    });
    $("div#tc3").click(function () {
        $('ul#tb3').slideToggle("fast");
    });
});

追加されたマークアップ：

<div id="tc1" class="tweetcontainer">
<div class="avatarcontainer">
  <div class="avatar"></div>
</div>
<div class="content">
  <div class="tweetheader">
    <div class="name">
      <h1>John Drake</h1>
    </div>
    <div class="tweethandle">
      <h2>@Drakejon</h2>
    </div>
    <div class="tweettime">10m</div>
  </div>
  <div>
    <p>Exceptional Buys Ranger To Give Monitoring Shot In The Arm To Its 'DevOps' Platform <a href="http://tcrn.ch/11m3BrO">http://tcrn.ch/11m3BrO</a> by <a href="#">@sohear</a> </p>
  </div>
</div>
</div>
  <!-------------Tool Bar -------------------------------->
<ul id="tb1" class="toolbar">
  <li><a class="reply" href="#"><span>reply</span></a></li>
  <li><a class="retweet" href="#"><span>retweet</span></a></li>
  <li><a class="favorite" href="#"><span>favorite</span></a></li>
  <li><a class="track" href="#"><span>track</span></a></li>
  <li><a class="details" href="#"><span>details</span></a></li>
</ul>
4

3 に答える 3

4

JavaScriptを詳細ページ関数から分離することを強くお勧めします。これを行う最良の方法は、リツイートパネルをツイートコンテナ内に配置することです。そうすれば、IDを指定したり、HTML構造とIDに関するJavaScript情報をエンコードしたりする必要さえありません。その後、次のことを実行できます。

$('.tweetcontainer').on('click', function(event) {
    if ($(event.target).is(':descendantof(.toolbar)')) {
       //ignore all clicks within the toolbar itself
       return;
    }
    $(this).find('.toolbar').slideToggle();
});​

とても簡単です！jsFiddleで実際の動作を確認してください。

これで、ページに必要な数のツイートコンテナを追加できます。また、JavaScriptを1ビット変更する必要はありません。特定のIDにリンクする特定のIDの知識を必要とする他のソリューションは最適ではありません。

descendantof疑似セレクターはカスタムであることに注意してください（どのように機能するかについては、フィドルを参照してください）。また、あなたはcssを提供しなかったので、私はいくつかを選択しなければなりませんでした-それは速かったのであまり期待しないでください。（ああ、質問を更新してjsFiddleにcssを提供し、はるかにきれいな結果を提供するのを見たばかりですが、今は変更しません。）実際のツイート自体にクラスを追加する必要がありましたが、おそらくあります。それをスタイリングするためのより良い方法。

また、表示されたツールバー自体（リンクの外側）をクリックしてツールバーを折りたたむことができるようにする場合は、上記のコードをに変更します:descendantof(a)。

ページレイアウトを変更したくない場合は、別の方法として、data属性を使用してhtml自体のhtmlパーツ間のリンクに関する情報をエンコードすることもできます。tweetcontainer divを変更しdataて、ターゲットを適切に特定するjQueryスタイルセレクターを含む属性を追加します。

<div class="tweetcontainer" data-target="#tb1">

他の場所で使用する場合は、実際にはIDを削除する必要はありませんが、もう必要ないことを確認してください。次に、document.readyで：

$('.tweetcontainer').click(function () {
   $($(this).data('target')).slideToggle('fast');
});

これは、この代替手法を示す別のjsFiddleです（私の意見では、それほどエレガントではありませんが）。

最後に、少し「div-itis」がある可能性があることをお伝えしたいと思います。（私たちは皆そこにいました。）ツールバーのアンカー要素には、内部に不要なスパンがあります。ツイートの名前h1要素はdiv内にありますが、h1代わりにclass="name"を使用することもできます。

一般に、div内にアイテムが1つしかなく、スタイルシートを変更してdivを削除できる場合は、divは必要ありません。HTMLには非常に多くのネストされたdivが含まれているため、できるだけ多くのdivを削除することをお勧めします。使用する他のブロック要素にスタイルを適用します。多くではないにしても、少なくともいくつかは必要ありません。

于 2012-12-10T03:25:18.170 に答える
2

私は提案します（現在テストされていませんが）：

$('div[id^="tc"]').click(function(){
    var num = parseInt(this.id.replace(/\D+/g,''),10);
    $('#tb' + num).slideToggle("fast");
});

は数字でnumある必要はありませんが（文字列としては問題ありません）、安全に省略できます。parseInt()

于 2012-12-09T15:39:08.853 に答える
-2

はい、次のようにこのコードをはるかにコンパクトに書くことができます。

$(document).ready(function() {
    for (var i = 1; i < 3; i++) {
        $("div#tc" + i).click(function() { $("ul#tb" + i).slideToggle("fast"); } );
    }
});
于 2012-12-09T15:40:37.090 に答える