2

这段代码有效，但我确信有一种更有效的方法可以使用我的新手级别以上的人可能会提供帮助的功能来完成这项工作。

我正在根据类型的 div 计数更改按钮标签文本字符串。如果计数为零，则隐藏按钮。如果计数等于 1，则该术语是单数的。如果计数大于一，则该术语是复数。

var countAll = $('li.posts').size();
var countText = $('div.text').size();
var countPhoto = $('div.photo').size();
var countQuote = $('div.quote').size();
var countLink = $('div.link').size();
var countChat = $('div.chat').size();
var countAudio = $('div.audio').size();
var countVideo = $('div.video').size();
var countAnswer = $('div.answer').size();
var countConversation = $('div.conversation').size();


$('.showAll').html("show all " + countAll + " posts ");

if (countText == 1) {
       $('.showText').html(countText + " text");
   } else if (countText > 1) {
        $('.showText').html(countText + " texts");
      } else {
        $('.showText').hide();
   };

if (countPhoto == 1) {
       $('.showPhoto').html(countPhoto + " photo");
   } else if (countPhoto > 1) {
        $('.showPhoto').html(countPhoto + " photos");
      } else {
        $('.showPhoto').hide();
   };

if (countQuote == 1) {
       $('.showQuote').html(countQuote + " quote");
   } else if (countQuote > 1) {
        $('.showQuote').html(countQuote + " quotes");
      } else {
        $('.showQuote').hide();
   };

if (countLink == 1) {
       $('.showLink').html(countLink + " link");
   } else if (countLink > 1) {
        $('.showLink').html(countLink + " links");
      } else {
        $('.showLink').hide();
   };   

if (countChat == 1) {
       $('.showChat').html(countChat + " chat");
   } else if (countChat > 1) {
        $('.showChat').html(countChat + " chats");
      } else {
        $('.showChat').hide();
   };

if (countAudio == 1) {
       $('.showAudio').html(countAudio + " audio");
   } else if (countAudio > 1) {
        $('.showAudio').html(countAudio + " audios");
      } else {
        $('.showAudio').hide();
   };

if (countVideo == 1) {
       $('.showVideo').html(countVideo + " video");
   } else if (countVideo > 1) {
        $('.showVideo').html(countVideo + " videos");
      } else {
        $('.showVideo').hide();
   };

if (countAnswer == 1) {
       $('.showAnswer').html(countAnswer + " answer");
   } else if (countAnswer > 1) {
        $('.showAnswer').html(countAnswer + " answers");
      } else {
        $('.showAnswer').hide();
   };

if (countConversation == 1) {
       $('.showConversation').html(countConversation + " conversation");
   } else if (countConversation > 1) {
        $('.showConversation').html(countConversation + " conversations");
      } else {
        $('.showConversation').hide();
   };

在此先感谢您的帮助！仍然在学习。

4

4 回答 4

4

在这种情况下，您可以使用一个通用的方法来接收选择器和文本：

var countAll = $('li.posts').size();
$('.showAll').html("show all " + countAll + " posts "); 
//Call the provided method foreach of your divs and links, one call for each, 
// instead of the relevant .size() and IF..ELSE blocks
SetVisibilityAndText('div.text', '.showText','text');
SetVisibilityAndText('div.photo', '.showPhoto', 'photo');
//etc for your other selectors / divs

function SetVisiblityAndText(countSelector, linkSelector, text){
 var count = $(countSelector).size();
  if (count == 1) {        
     $(linkSelector).html(count + " " +text);    
  } 
  else if (count > 1) {         
     $(linkSelector).html(count + " "+ text+ "s");       
  }  
  else 
  {         
      $(linkSelector).hide();    
  }; 
}
于 2012-06-27T13:35:25.877 回答
2

你可以这样做：

html:

<label class='show' id='photo'>
<div class='photo'></div>.. etc

js：

$('label.show').each(function(){
   var id = $(this).attr('id');
   var count = $('div.'+id).count();
   var mul = (count > 1) ? 's' : '';
   $(this).html(count+' '+id+mul);
});

我敢肯定这看起来会更好......

于 2012-06-27T13:39:54.557 回答
2

有两种关键方法可以改进此代码：

  1. 使用函数或for循环删除重复代码。
  2. 使用三元删除else if

函数/For循环

您多次重复代码结构。最好的方法是编写一次代码，并使其执行多次。我将同时使用函数和 for 循环。你的基本结构总是一样的——取一个 div 标签，获取大小，然后编辑一个 class 标签.show<name>。

三元

三元构造基于if-else-return并适合 1 行。它将根据布尔测试为您提供两个值之一。例如：

if (number>1) return "votes" else return "vote"`

其语法是((test) ? "value-if-true" : "value-if-false").

您的最终产品：

$('.showAll').html("show all " + $('li.posts').size() + " posts ");

var counts = ["text", "photo", "quote", "link", "chat", "audio", "video", "answer", "conversation"];

function showcount(name) {
    var divcount = $("div."+name).size()
    var classname = ".show" + name.charAt(0).toUpperCase() + name.slice(1);
    if (divcount >= 1) {
        $(classname).html(divcount + " " + name + ((divcount==1) ? "" : "s"));
    }
    else {
        $(classname).hide();
    }
}

for (var i=0; i<counts.length; i++) {
    showcount(counts[i]);
}

我没有测试过这个；请让我知道它是否有效。

于 2012-06-27T13:55:37.467 回答
0

您可以将所有逻辑集中在一个函数中：

function check( count, el ){
var $el = $(el);
if (count == 1) {
       $( el ).html(count + " text");
    } else if (count > 1) {
        $el.html(count + " texts");
    } else {
        $el.hide();
    } 
}

然后使用它：

check( countText, '.showText' );
check( countPhoto, '.showPhoto' );
//....
于 2012-06-27T13:38:19.507 回答