使用starrr星级插件时，如何根据选中星级显示对应数组消息？

首先看你的代码，问题主要出在两个细节上，调整一下就能正常实现需求：

问题分析 #

1. 索引不匹配：数组的索引是从0开始的，但starrr插件返回的value是1-5的数字，你之前固定取ratingMsgs[0]，自然只会显示第一条消息。
2. 内容追加而非替换：使用append()会把消息不断追加到元素里，而不是更新原有内容，会导致消息越积越多。

修正后的完整代码 #

$('.rating').starrr({ 
  change: function(e, value) { 
    console.log(value); 
    // 星级对应消息数组
    var ratingMsgs = [ 
      'star 1 selected', 
      'star 2 selected', 
      'star 3 selected', 
      'star 4 selected', 
      'star 5 selected' 
    ]; 
    var ratingMsg = $("p.message"); 
    // 根据选中星级匹配对应消息，替换内容而非追加
    ratingMsg.removeClass('hidden').text(ratingMsgs[value - 1]); 
  } 
});

关键改动说明 #

• 把ratingMsgs[0]改成ratingMsgs[value - 1]：因为value是1-5，数组索引是0-4，减1后就能精准对应到选中星级的消息。
• 把append()改成text()：每次选中新星级时，会直接替换掉之前的消息，避免内容重复累加。
• 修正了选择器：你原来写的$('rating')少了类选择器的点，应该是$('.rating')（假设你的星级元素class为rating），这个小细节会导致插件初始化失败。

这样修改后，选中1星就会显示star 1 selected，选中2星显示star 2 selected，以此类推，完全符合你的需求啦～

内容的提问来源于stack exchange，提问作者Sanjeev Kumar