我目前正在使用 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]);
的输出
最佳答案
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>`;
关于javascript - 检查数组的值是否大于。比起其他造型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41509388/