2

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

下面的代码有效。这不应该写得更好，以便只拨打一个电话吗？或者，随着新推文的添加。我是否只需要使用 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 结构和 ids 的 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 不必更改任何内容。需要了解链接到特定 id 的特定 id 的其他解决方案是次优的。

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

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

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

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

如果您在其他地方使用它，您实际上不必删除它，但我希望您看到您不再需要它。然后在 document.ready 上：

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

这是另一个 jsFiddle演示了这种替代技术（尽管在我看来它不太优雅）。

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

一般来说，如果 div 中只有一个项目，并且您可以更改样式表以消除 div，则不需要 div。你的 html 中有很多嵌套的 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 回答