如何使用「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。否則有很多選擇。