流星のテキスト内のランダムな文章の色を切り替える方法

Question

私のウェブサイトにはテキストと複数のタグがあり、タグをクリックするたびにランダムな文章を強調表示したい（同時にタグが "アクティブ"）。私のコードは次のとおりです。

'click #mytag .selectize-control.multi .selectize-input [data-value]': function(){ 
    if($(event.target).attr('class') == "item"){ 
     $(event.target).removeClass().addClass('item active'); 
     var dataval = $(event.target).attr('data-value'); 
     //to "deactivate" other active tags 
     $('.selectize-control.multi .selectize-input [data-value]').each(function(){ 
     if($(this).attr('class') == "item active" && $(this).attr('data-value') != dataval){ 
      $(this).removeClass().addClass('item'); 
      } 
     }); 

     //generate a random random index and find the corresponding sentence to change the color 
     Meteor.call("generateSentence",asin, function(error, result){ 
      Session.set("colorSentence", result); 
     }); 
     var sid = Session.get("colorSentence"); 
     var id = 'span#sentence'+sid.toString(); 
     $(id).css("background","yellow"); 
    } 
    } 

1つのタグをクリックするたびに背景色が黄色で強調表示されたランダムな文章を得ることができます。しかし、次回は、別のタグをクリックして色を切り替えると、そのたびに背景色が1行だけになります。誰もそれを行う方法を提案することはできますか？

また、たびに1つのタグを「アクティブ」にするために、すべてのタグをループして状態をチェックし、他のアクティブなタグをオフにします。それはかなりブルートですが、私のタグが多すぎるので少なくとも機能します。しかし、ここにはもっと文章があるので、私はここで同じことをしたくありません。私はまた、毎回他のタグを非アクティブにするより洗練された方法についてのアイデアに感謝します。ありがとう

Answer 1

最初にすべての文章にclass="sentence"を追加してください。

今、あなたの背景を無効にするために、第二

$('span.sentence').attr(style, ''); 

行う、あなたは流星の呼び出しの結果を処理するためにセッション変数を使用している方法が悪いパターンです。不要なリアクティブ・オブザーバを使用し、コールバックで作業するよりも実行するのが難しくなります。だから、合計で、あなたのコードは次のようになります。

Meteor.call("generateSentence", asin, function(error, result){ 
    $('span.sentence').attr(style, ''); 
    $('span#sentence' + result).css("background", "yellow"); 
}); 

はjQuerysであなたのタグを無効にするために、あなたの明示的なループを交換して、複数の要素の選択の処理に使用すると、文のスタイルをクリアするのと同じ方法を構築します。