Question

我正在建立一个法语网站，其中一些（但不是全部）文章翻译成英语，西班牙语和/或德语。这些文章中的每一篇都应该有一个代表可用翻译的小标志。然后，用户点击德国国旗，然后使用jquery将内容替换为德语版本的文本。标志也应该消失并被替换为类似X（也就是“关闭”按钮）的东西。单击此X后，将再次显示法语版本。

我的jQuery技能接近于零，我做到了这一点：

$('.flags button').click(function() {
  $("p:lang(fr)").hide();
  $("p:lang(gb)").show();
  $('span.flags').html('<button type="button" class="close"></button>');
});
$('button.close').click(function() {
  $("p:lang(fr)").show();
  $("p:lang(gb)").hide();
});

X不起作用，但我迟早会弄明白。还有，还有更好的方法吗？

非常感谢！

Answer 1

您应该使用jQuery .on()，因为button.close是由于其他功能而动态创建的。因此，更改后您的代码将变为，


    $(document.body).on('click','button.close',(function() {
      $("p:lang(fr)").show();
      $("p:lang(gb)").hide();
    });

$('button.close').click(function() { //your code })

只有在解析HTML文档时出现HTML元素时，才会注册click处理程序。

有关详细信息，请查看this blog post

同时检查http://api.jquery.com/on/

Answer 2

将事件处理程序绑定到动态内容的包装器而不是尚不存在的内容（因此无法绑定）

$('.flags button').click(function() {
  $("p:lang(fr)").hide();
  $("p:lang(gb)").show();
  $('span.flags').html('<button type="button" class="close"></button>');
});
$('span.flags').on('click','button.close',function() {
  $("p:lang(fr)").show();
  $("p:lang(gb)").hide();
});

编辑：更好的方式（也许）

要回答你的问题，还有更好的方法吗？或许，如果更灵活/模块化是更好的方式，那么我们可能会这样做。

以下是实例中的示例：https://jsfiddle.net/MarkSchultheiss/y11qpd1L/

底线是你想要一个语言选择器。我们可以讨论您拥有/想要的语言，但这取决于您的数据;所以让我们让数据确定“标志”，你可以决定是否要保留“默认” - 我只是把它放在数据中（在标记中）。

这是一个示例标记：它不是那么简单，因为人们常常这样做，我希望为每篇文章显示“按钮/标志”的“组”，并使其易于查看。请注意data-languagedefault="fr"元素上的.article。现在，在“默认”（X按钮）之外的任何你称之为按钮/标志的按钮/标志都没有显示，它们是从内容的数据生成的。您可以增强它以使用图像等，但我在示例中使用了简单的文本。

<div id="articles">
  <div class="article" data-languagedefault="fr">
    <div class="flags">
      <ul class="myflags">
        <li>
          <button class="default" type="button">Default</button>
        </li>
      </ul>
    </div>
    <div class="container">
      <span class="content" lang="fr" data-language="fr">I am french</span>
      <span class="content" lang="gb" data-language="gb">I am gb</span>
      <span class="content" lang="tr" data-language="tr">I am tr</span>
      <span class="content" lang="en-us" data-language="en-us">I am en-us</span>
      <span class="content" lang="en-gb" data-language="en-gb">I am en-gb</span>
    </div>
  </div>
</div>

现在我们如何利用它？我们从.content跨度数据属性创建一些按钮，然后使用它们来驱动显示的内容等。

我从此页面的答案中借用了jQuery扩展程序filterByData：https://stackoverflow.com/a/22209579/125981

$(document).ready(function() {
  (function($) {
    $.fn.filterByData = function(prop, val) {
      var $self = this;
      if (typeof val === 'undefined') {
        return $self.filter(function() {
          return typeof $(this).data(prop) !== 'undefined';
        });
      }
      return $self.filter(function() {
        return $(this).data(prop) == val;
      });
    };
  })(window.jQuery);
  // setup all flags from data
  $('#articles').find('.article').find('.content').each(function(index) {
    var lang = $(this).data('language');
    $('.flags').find('.myflags')
      .append('<li><button class="flag" data-language="' + lang + '" type="button">' + lang + '</button></li>');
  });
  // show active button
  $('li').on('activate', function() {
    $(this).addClass('active').siblings().removeClass('active');
  });
  //set currently active language indicator and language
  function setLang(me) {
    var lang = $(me).data('language');
    $(".content:lang(" + lang + ")").show().siblings('.content').hide();
    $(me).parent('li').trigger('activate');
    var defaultLang = $(me).parents('.article').eq(0).data('languagedefault');
    var isDefault = defaultLang == lang;
    $('#articles').find('.article').find('.myflags').find('button.default').toggle(!isDefault);
  }
  $('#articles').find('.article').find('.myflags').on('click', 'button.flag', function() {
    setLang(this);
  });
  $('#articles').find('.article').find('.myflags').on('click', 'button.default', function() {
    var defaultLang = $(this).parents('.article').eq(0).data('languagedefault');
    var flag = $('.flag').filterByData('language', defaultLang);
    setLang(flag);
  });
});

编辑：注意，如果您想要选择“默认”，只需触发点击“按钮/标志”

$('#articles').find('.article').find('.myflags').find('button.default').trigger('click');

OR，即使是其他语言（作为选项）

$('.flag').filterByData('language', 'gb').trigger('click');

多语言jquery开关

2 个答案:

编辑：更好的方式（也许）