javascript - 检查数组的值是否大于。比起其他造型

Question

我目前正在使用 jquery mobile，并且有一个动态通知面板。因此，我想检查文本中的字符数以作为样式的基础。因此，例如，如果 通知文本 > 10，则将高度设置为 Xpx。

但我首先要做的是:

for(var count = 0; count < info.data.length; count++){
    var shortmessage = info.data[count][3];
    var category = info.data[count][4];

    if(category === 'douane'){
        douaneHtml = douaneHtml + "<div class='notification-item'>" +
                                    "<div class='ui-grid-a notification-grid'>" +
                                    "<div class='ui-block-a'>" + 
                                        "<img class='notification-image' src=" + imgPath + ">"+ 
                                    "</div>" +
                                    "<div class='ui-block-b'>" + 
                                        "<span class='notification-text'>" + shortmessage +  "</span>" + 
                                    "</div>" + 
                                "</div>";

        $('.douane-notification-append').empty().prepend(douaneHtml); 
    }

}

所以基本上我想做的是检查:

if ( shortmessage.val().length() > 10 ){
    $('.notification-item').css('min-height', '100px');
 }

但是当我在 if(category === 'douane') 中执行 console.log(shortmessage.val()); 时，我会得到这个作为返回:

shortmessage.val is not a function

有人可以帮我解决这个问题吗，所以基本上我想做的是计算 shortmessage 中的字符数，并根据它做不同的样式。

这是 console.log(info.data[count]); 的输出

Answer 1

shortmessage是一个String，需要读取length属性:

• 我已经清理了字符串生成，使用字符串数组，然后加入它们。好多了!
• 检查是否太短并修改style变量

• 然后在模板中使用它

  for(var count = 0; count < info.data.length; count++){
      var shortmessage = info.data[count][3];
      var category = info.data[count][4];
      var style = '';
  
      // if long message, set the style
      if ( shortmessage.length > 10 ){
          style = 'min-height: 100px';
      }else if ( shortmessage.length > 20 ){
          style = 'min-height: 200px';
      }else if ( shortmessage.length > 30 ){
          style = 'min-height: 300px';
      }
  
      if(category === 'douane'){
  
          douaneHtml = [
              douaneHtml,
              "<div class='notification-item' style='" + style + "'>",
                  "<div class='ui-grid-a notification-grid'>",
                  "<div class='ui-block-a'>",
                      "<img class='notification-image' src=" + imgPath + ">",
                  "</div>",
                  "<div class='ui-block-b'>",
                      "<span class='notification-text'>" + shortmessage +  "</span>",
                  "</div>",
              "</div>"
          ].join('');
  
          $('.douane-notification-append').empty().prepend(douaneHtml); 
      }
  }
  

如果可以，试试新的 ES2015 字符串。大量清理代码。

   douaneHtml = `
                ${douaneHtml}
                <div class='notification-item' style='${style}'>
                    <div class='ui-grid-a notification-grid'>
                    <div class='ui-block-a'>
                        <img class='notification-image' src='${imgPath}'>
                    </div>
                    <div class='ui-block-b'>
                        <span class='notification-text'>${shortmessage}</span>
                    </div>
                </div>`;