文章/答案/技术大牛

发布

社区首页 >问答首页 >JS -这不是应该写得更好吗？一个函数与多个函数？

问JS -这不是应该写得更好吗？一个函数与多个函数？
EN

Stack Overflow用户

提问于 2012-12-09 23:34:45

回答 3查看 139关注 0票数 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>

javascript

jquery

frontend

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-12-10 11:25:18

我强烈建议将你的javascript与你的详细页面功能分开。最好的方法是将retweeting面板放在tweet容器中，这样你根本不需要给它一个id，或者在javascript中编码关于html结构和id的信息。然后你就可以这样做了：

$('.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。

现在，您可以向页面添加任意数量的tweet容器--而且您的javascript不需要做任何更改。其他需要特定ids链接到特定ids的知识的解决方案不是最优的。

请注意，descendantof伪选择器是自定义的(请参阅小提琴了解其工作原理)。另外，因为您没有提供任何css，所以我不得不选择一些--它很快，所以不要期望太高。(见鬼，我刚刚看到您更新了您的问题，提供了一个带有css的jsFiddle，提供了一个更漂亮的结果--但我现在不会改变我的。)我确实需要向实际的tweet本身添加一个类，但可能有一种更好的方式来样式化它。

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

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

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

如果你在其他地方使用它，你并不需要删除它，但是我希望你看到你不再需要它了。然后在document.ready上：

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

下面的another jsFiddle演示了这种替代技术(尽管在我看来，它不那么优雅)。

最后，我想提一下，你可能有一点"div-itis“。(我们都有过这样的经历。)工具栏锚点元素内部有不必要的跨度。tweet name h1元素在一个h1中，但也可以只是一个带有class="name“的div。

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

票数 4

Stack Overflow用户

发布于 2012-12-09 23:39:09

我建议(尽管目前尚未测试)：

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

尽管您不需要num是一个数字(它可以作为一个字符串)，但是您可以安全地省略parseInt()。

票数 2

Stack Overflow用户

发布于 2012-12-09 23:40:37

是的，您可以像这样更紧凑地编写此代码：

$(document).ready(function() {
    for (var i = 1; i < 3; i++) {
        $("div#tc" + i).click(function() { $("ul#tb" + i).slideToggle("fast"); } );
    }
});

票数 -2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13788850

复制

相似问题

问JS -这不是应该写得更好吗？一个函数与多个函数？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JS -这不是应该写得更好吗？一个函数与多个函数？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JS -这不是应该写得更好吗？一个函数与多个函数？
EN