Question

我想在使用jquery单击按钮时更改导航元素，我创建了json对象并添加了jquery脚本，但我不知道它为什么不起作用？

<!doctype html>
<html lang="en">
<head>

  <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

</head>
<body>


  <li class="lang" key="home">Home</li>
  <li class="lang" key="about">About Us</li>
  <li class="lang" key="contact">Contact Us</li>


  <button class="translate" id="en">English</button>
  <button class="translate" id="ar">عربي</button>

这是json对象

  <script>
  var arrLang = {
    'en': {

      'home': 'Home',
      'about': 'About us',
      'contact': 'contact us'
    },

    'ar': {

      'home': 'الصفحة الرئيسية',
      'about': 'عن الشركة',
      'contact': 'اتصل بنا'
    }
  };

这是jquery的脚本

  $(function() {
    $('.translate').click(function() {
      var lang = $(this).attr('id');

      $('lang').each(function(index, element) {

        $(this).text(arrLang[lang][$(this).attr('key')]);

      });

    });

  });
</script>

</body>
</html>

我正在尝试使用jquery翻译nave元素，但我不知道这段代码有什么问题？

Answer 1

您必须使用.lang作为选择器，因为lang是一个类。

＆＃13;

var arrLang = {
  'en': {'home': 'Home','about': 'About us','contact': 'contact us'},
  'ar': {'home': 'الصفحة الرئيسية','about': 'عن الشركة','contact': 'اتصل بنا'}
};

$('.translate').click(function() {
  var lang = $(this).attr('id');

  $('.lang').each(function(index, element) {
    $(this).text(arrLang[lang][$(this).attr('key')]);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="lang" key="home">Home</li>
  <li class="lang" key="about">About Us</li>
  <li class="lang" key="contact">Contact Us</li>
</ul>

<button class="translate" id="en">English</button>
<button class="translate" id="ar">عربي</button>

＆＃13;

我试图使用jquery转换导航这个代码有什么问题？

1 个答案: