如何使用“显示：无；”在标题属性内的 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>

如您所见，gem 中缺少翻译，这就是为什么会出现这个丑陋文字的原因！为了解决这个问题，我不想用 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。否则有很多选择。