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

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>

正如您所看到的，宝石中缺少一个翻译，这就是为什么会出现这个丑陋的文字！要解决这个问题，我想不用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>

该gem中的代码不是很好 - 为了不生成无效的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。否则有很多选择。