Question

Iam目前正在使用jquery mobile并拥有动态通知面板。因此，我想检查文本中的字符数，以建立样式。例如，如果text of a notification is > 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');
 }

但是当我在console.log(shortmessage.val());内进行if(category === 'douane')时，我会得到回报：

shortmessage.val is not a function

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

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

的输出

Answer 1

shortmessage是String，您需要阅读length属性：

我已经使用字符串生成进行了清理，之后使用了一个字符串数组和join。好多了！
检查它是否太短并改变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>`;

Answer 2

问题： val()方法无法在字符串上调用，因为shortmessage包含会引发错误的字符串消息。

建议的解决方案：只需删除额外的.val()即可：

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

注意： length是一个属性，因此您应该从()中移除length。

希望这有帮助。

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

2 个答案: