javascript - JS - 这不应该写得更好吗？一个功能与多个功能？

Question

我有一个推文流，新推文被添加到顶部，旧推文被推到下面。您可以点击整条推文，一个面板会向下滑动以显示“回复”、“转推”、“收藏”等。该面板会添加到流中添加的每条新推文中。

下面的代码有效。这不应该写得更好，以便只打一个电话吗？或者，添加新的推文。我是否只需要使用 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>

Answer 1

我强烈建议将您的 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();
});​

这很简单! See it in action in a jsFiddle .

现在，您可以根据需要向页面添加任意数量的推文容器——而您的 javascript 无需更改任何一点。需要知道链接到特定 ID 的特定 ID 的其他解决方案不是最优的。

请注意 descendantof 伪选择器是自定义的(请参阅 fiddle 以了解其工作原理)。另外，由于您没有提供任何 css，我不得不选择一些——它很快所以不要期望太多。 (哎呀我刚刚看到你更新了你的问题以提供一个带有 css 的 jsFiddle 给出了更漂亮的结果——但我现在不会改变我的。)我确实必须向实际推文本身添加一个类，但可能有一种更好的样式设置方式。

如果您想要单击显示的工具栏本身(在链接之外)以允许折叠工具栏，请将上面的代码更改为 :descendantof(a)。

如果您不想更改页面布局，另一种方法是使用 data 属性在 html 本身中对有关 html 部分之间链接的信息进行编码。更改您的 tweetcontainer div 以添加一个 data 属性，其中包含一个 jQuery 样式选择器，可以正确定位目标:

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

如果你在别处使用它，你真的不必删除它，但我想让你看到你不再需要它了。然后在 document.ready 上:

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

这里是 another jsFiddle演示这种替代技术(尽管在我看来它不太优雅)。

最后，我想提一下，您似乎有一点“div-itis”。 (我们都去过那里。)工具栏 anchor 元素内部有不必要的跨度。推文名称 h1 元素在一个 div 中，但可以只是一个带有 class="name"的 h1。

一般来说，如果 div 中只有一个项目，并且您可以更改样式表以消除 div，则不需要 div。您的 html 中有大量嵌套的 div，我鼓励您尽可能多地删除它们。将样式应用于您使用的其他 block 元素，并且至少有一些(如果不是很多的话)是不需要的。