功能/循环

Question

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

我正在根据类型的div计数更改按钮标签文本字符串。如果计数为零，则隐藏按钮。如果计数等于1，则该术语是单数。如果计数大于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();
   };

提前感谢您的帮助！还在学习。

Answer 1

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

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();    
  }; 
}

Answer 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);
});

我确信这看起来会更好......

Answer 3

有两种主要方法可以改进此代码：

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

功能/循环

您多次重复代码结构。执行此操作的最佳方法是编写一次代码，并使其执行多次。我将同时使用函数和for循环。您的基本结构始终相同 - 使用div标记，获取大小，然后编辑类标记.show<name>。

三元

三元构造在if-else-return的基础上工作，并且适合于一行。它将根据布尔测试为您提供两个值之一。例如：

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]);
}

我还没有测试过这个;请告诉我它是否有效。

Answer 4

您可以将所有逻辑集中在一个功能中：

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' );
//....

寻找比这个IF，ELSEIF，ELSE方法更好的解决方案

4 个答案:

功能/循环

三元

您的最终产品：