如何在流星中切換文本中隨機句子的顏色

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"); 
    }
  }

每次單擊一個標簽時，我都會得到一個隨機的句子，背景顏色為黃色。 但是，下一次單擊另一個標簽時，我想關閉顏色，以便每次只有一行帶有背景色。 有人可以建議如何做嗎？

另外，為了每次僅使一個標簽保持“活動”狀態，我遍歷所有標簽以檢查其狀態並關閉其他活動標簽。 這很殘酷，但至少可以工作，因為我的標簽太多了。 但是由於這里有更多的句子，我不想在這里做同樣的事情。 我也很感謝每次使用聰明方法停用其他標簽的想法。 謝謝

Answer 1

首先，在所有句子跨度中添加class="sentence" 。

現在，要停用背景，請執行

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

其次，使用Session變量處理Meteor調用結果的方式是錯誤的模式。 它使用了不必要的反應式觀察者，比在回調中完成工作更難遵循。 因此，總的來說，您的代碼變為：

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

替換顯式循環以使用處理多個元素選擇的jQuerys停用標簽，就像清除句子樣式一樣。