如何使用“display：none;”在标题属性中的span元素上？

Question

我正在使用社交分享按钮gem在社交媒体上分享博文。我已将网站国际化，意思是网站是双语（英语和德语）。一切工作正常，但我对社会共享按钮一个问题，如果我切换到德国：

show.html.erb

<div id="share_box"> 
    <% if I18n.locale == :de %> 
     <h3 class="share_title wow bounceIn" data-wow-duration="1400ms" data-wow-delay="200ms">Teile diesen beitrag</h3> 
    <% else %> 
     <h3 class="share_title wow bounceIn" data-wow-duration="1400ms" data-wow-delay="200ms">Share this Post</h3> 
    <% end %> 
    <div class="wow fadeIn" data-wow-duration="1400ms" data-wow-delay="200ms"> 
     <% if I18n.locale == :de %> 
      <%= social_share_button_tag(@post.title_de, :url => post_url(@post)) %> 
     <% else %> 
      <%= social_share_button_tag(@post.title_en, :url => post_url(@post)) %> 
     <% end %> 
    </div> 
</div> 

英语：

<a rel="nofollow " data-site="twitter" class="ssb-icon ssb-twitter" onclick="return SocialShareButton.share(this);" title="Share to Twitter" href="#"></a> 

德语：

<a rel="nofollow " data-site="twitter" class="ssb-icon ssb-twitter" onclick="return SocialShareButton.share(this);" title="<span class=" translation_missing"="">Share To" href="#"&gt;</a> 

正如你可以看到有一个翻译宝石内失踪，这就是为什么这个丑陋的文字出现！要解决这个问题，我想不显示与CSS的文本。不幸的是，我有触发文本的巨大问题！

这是迄今为止我已经试过：

1）具有零效果

.translation_missing { 
    display: none !important; 
} 

2）整个图标消失

a[title] { 
    display: none !important; 
} 

3）尝试摆脱它与JavaScript（只有悬停文字消失）

$(document).ready(function() { 
    $("a").removeAttr("title"); 
}); 

悬停文字是：

<span class= 

元件上的JavaScript检查：

<a rel="nofollow " data-site="twitter" class="ssb-icon ssb-twitter" onclick="return SocialShareButton.share(this);" translation_missing"="">Share To" href="#"&gt;</a> 

如果任何人有任何提示如何解决这一问题，并删除这个丑陋的文字我会非常高兴！提前致谢！

Answer 1

而不是乱抛垃圾你的代码与条件你可以使用动态调用和I18n模块。

module PostsHelper 
    def localized_title(post, locale: I18n.locale) 
    post.public_send("title_#{locale.to_s}") 
    end 
end 

---

<div id="share_box"> 
    <h3 class="share_title wow bounceIn" data-wow-duration="1400ms" data-wow-delay="200ms"><%= t('.share_this_post') %></h3> 
    <div class="wow fadeIn" data-wow-duration="1400ms" data-wow-delay="200ms"> 
    <%= social_share_button_tag(localized_title(@post), url: post_url(@post)) %> 
    </div> 
</div> 

在创业板代码不是很大 - 为了不产生无效的HTML this line：

link_title = t "social_share_button.share_to", :name => t("social_share_button.#{name.downcase}") 

应检查是否存在翻译（含translate!）或提供默认：

link_title = strip_tags(t("social_share_button.share_to", default: 'Share to')), :name => strip_tags(t("social_share_button.#{name.downcase}", default: name)) 

如果你真的喜欢那个特殊的宝石fork and fix it and send a pull request。否则有很多选择。