Question

我正在根据他们选择的颜色为每个用户向应用程序提交的文本着色。为此，我会在新用户选择其颜色时向样式表中动态添加规则。

我要解决的问题是在不重新加载页面的情况下使用AJAX更新此颜色。

我通过分配与每个用户及其提交的故事相对应的类来应用颜色：

build.gradle

在应用程序加载后，我会使用JQuery为与该<span class="<%= "contrib-u#{snippet.user.id}-s#{@story.id}" %>"> (code to display text submission) </span>格式（对用户1，故事2的贡献）相匹配的每个用户创建一次类：

contrib-u1-s2

到目前为止，这很好。基于这些动态创建的类，每个用户对每个故事的提交都将正确着色。

接下来，我为用户提供一个文本字段，以便他们可以为其提交选择新的颜色：

$(document).one 'turbolinks:load', ->                                               
  build_contribution_styles()                                                       

build_contribution_styles = ->                                                      
  req = $.get('/contributions/index')                                               

  req.done (data) ->                                                                
    user_sheet = document.styleSheets[5]                                            

    for contribution in data                                                        
      user_sheet.addRule(                                                           
        ".contrib-u" + contribution['user_id'] + "-s" + contribution['story_id'], 
        "color: #" + contribution['color']                                          
      )

然后，在JQuery中，我将事件侦听器附加到此文本字段，以使用新选择的颜色更新数据库和类：

<%= text_field_tag :snippet_color,
  current_user.get_contribution_color(@story),
  class: "jscolor centered-text",
  data: {user_id: current_user.id, story_id: @story.id}
%>

这也很好用，但是仅在我重新加载页面之后。直到那时，对类的更新才应用于元素。

这让我有些困惑，因为在许多其他情况下，我使用javascript动态更改元素的CSS样式，并且它的更改无需任何页面刷新。例如，在此应用程序中，很多时候我选择一个元素并切换其显示属性以隐藏或显示它。

我已经找到了一些有关“在不刷新页面的情况下重新加载CSS样式”的信息源，但是似乎没有一个可以解决此特定问题。一种建议是将这些新的CSS规则放入带有这些元素的页面上的样式标签中，以使它们无需重新加载即可自动更新，但这对我而言似乎没有任何区别。

编辑：有效的解决方案

我现在可以通过删除以前的规则并将其添加到样式表中来使其工作：

$(document).on 'turbolinks:load', ->                                                                                         
  $('#snippet_color').change (e) -> handle_snippet_color_change(e, @)                                                                                                                              

handle_snippet_color_change = (e, input) ->                                         
  data = {                                                                          
    contribution: {                                                                 
      story_id: $(input).data('story-id'),                                          
      user_id: $(input).data('user-id'),                                            
      color: $(input).val()                                                         
    }                                                                               
  }                                                                                 

  req = $.post('/contributions/update', data)                                       

  req.done (data) ->                                                                
    els = $('.contrib-u' + data['user_id'] + '-s' + data['story_id'])                                                                                                                                                                                                                                            
    els.css('color', data['color'])

问题是我只是在更新现有元素的样式。我仍然不确定为什么不立即应用它们的更新样式，但是这种新方法可以实现所需的功能。

使用JQuery动态更改CSS类后更新显示的文本元素

0 个答案: