2

このコードは機能しますが、私の初心者レベルを超える人々が役立つ可能性のある機能を使用して、より効率的に仕事をする方法があると確信しています。

タイプ別の 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();
   };

よろしくお願いします。まだまだ勉強中。

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

このコードを改善するための2つの重要な方法があります。

  1. 関数またはforループを使用して繰り返しコードを削除します。
  2. 三進法を使用してelse if

関数/Forループ

コード構造を数回繰り返します。これを行う最良の方法は、コードを1回記述し、それを数回動作させることです。関数とforループの両方を利用します。基本的な構造は常に同じです。divタグを取得し、サイズを取得してから、クラスタグを編集し.show<name>ます。

三項

三元構造は、1行に基づいて機能し、if-else-return1行に収まります。ブールテストに基づいて、2つの値のいずれかが得られます。例えば：

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 に答える
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 に答える
0

すべてのロジックを 1 つの関数に集中させることができます。

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 に答える