「display：none;」の使用方法タイトル属性の中にあるスパン要素で？

Question

ソーシャルメディアのブログ投稿を共有するためにソーシャルシェアーボタンの宝石を使用しています。私はウェブサイトがバイリンガル（英語とドイツ語）であることを意味するウェブサイトを国際化しました。すべてが正常に動作しますが、私はドイツ語に切り替える場合、私は、ソーシャルシェアボタン上の問題を持っている：

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> 

あなたが見ることができるように宝石の内側に不足している訳であり、この醜いテキストが表示された理由thatsの！この問題を解決するために、私は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。さもなければ、たくさんの選択肢があります。