如何将这些按钮的效果更改为 select 以便删除按钮？

Question

我想使用 select 而不是按钮来翻译此页面，我想删除这些按钮。按钮工作正常唯一的问题是他们不应该在那里，而应该只有 select.

var arrLang = {
  'en': {
    'home': 'Home',
    'about': 'About Us',
    'contact': 'Contact Us',
    'desc': 'This is my description'
  },
  'km': {
    'home': 'ទំព័រដើម',
    'about': 'អំពីយើង',
    'contact': 'ទំនាក់ទំនងយើងខ្ញុំ',
    'desc': 'នេះគឺជាអត្ថបទរបស់ខ្ញុំ'
  }
};

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

    $('.lang').each(function(index, item) {
      $(this).text(arrLang[lang][$(this).attr('id')]);
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="en" class="translate">English</button>
<button id="km" class="translate">ខ្មែរ</button>
<select id="language" class="translate" style="">
  <option value="en">English</option>
  <option value="km">ខ្មែរ</option>
</select>

<ul>
  <li class="lang" id="home">Home</li>
  <li class="lang" id="about">About Us</li>
  <li class="lang" id="contact">Contact Us</li>
</ul>
<p class="lang" id="desc">This is my description</p>

<br>

Answer 1

这里有几件事：

删除按钮
将事件侦听器更改为 onchange，因为它将在 select 值更改时触发。
获取 .val() 而不是 select 的 id（保存您的 lang 密钥）

以下是这些更改的示例：

var arrLang = {
  'en': {
    'home': 'Home',
    'about': 'About Us',
    'contact': 'Contact Us',
    'desc': 'This is my description'
  },
  'km': {
    'home': 'ទំព័រដើម',
    'about': 'អំពីយើង',
    'contact': 'ទំនាក់ទំនងយើងខ្ញុំ',
    'desc': 'នេះគឺជាអត្ថបទរបស់ខ្ញុំ'
  }
};

// Process translation
$(function() {
  $('.translate').on("change", function() {
    var lang = $(this).val();

    $('.lang').each(function(index, item) {
      $(this).text(arrLang[lang][$(this).attr('id')]);
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="language" class="translate" style="">
  <option value="en">English</option>
  <option value="km">ខ្មែរ</option>
</select>

<ul>
  <li class="lang" id="home">Home</li>
  <li class="lang" id="about">About Us</li>
  <li class="lang" id="contact">Contact Us</li>
</ul>
<p class="lang" id="desc">This is my description</p>

<br>

Answer 2

在您的函数中，您使用按钮的 ID select 语言。如果您想将其更改为 select 字段，您可以改用 select 选项的值。下面两种方式对比：

var arrLang = {
  'en': {
    'home': 'Home',
    'about': 'About Us',
    'contact': 'Contact Us',
    'desc': 'This is my description'
  },
  'km': {
    'home': 'ទំព័រដើម',
    'about': 'អំពីយើង',
    'contact': 'ទំនាក់ទំនងយើងខ្ញុំ',
    'desc': 'នេះគឺជាអត្ថបទរបស់ខ្ញុំ'
  }
};

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

    $('.lang').each(function(index, item) {
      $(this).text(arrLang[lang][$(this).attr('id')]);
    });
  });
});
$(function() {
  $('select.translate').on('change', function () {
     var lang = $(this).val();
     
     $('.lang').each(function(index, item) {
        $(this).text(arrLang[lang][$(this).attr('id')]);
      });
   })
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<button id="en" class="translate">English</button>
<button id="km" class="translate">ខ្មែរ</button>
<select id="language" class="translate" style="">
    <option value="en">English</option>
    <option value="km">ខ្មែរ</option>
</select>

<ul>
  <li class="lang" id="home">Home</li>
  <li class="lang" id="about">About Us</li>
  <li class="lang" id="contact">Contact Us</li>
</ul>
<p class="lang" id="desc">This is my description</p>

Answer 3

您需要为 select 使用 .change() 才能正常运行。我已经对您的代码进行了足够的更改。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Multiple Languages with Jquery and Json</title>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript">
    var arrLang = {
      'en': {
        'home': 'Home',
        'about': 'About Us',
        'contact': 'Contact Us',
        'desc': 'This is my description'
      },
      'km': {
        'home': 'ទំព័រដើម',
        'about': 'អំពីយើង',
        'contact': 'ទំនាក់ទំនងយើងខ្ញុំ',
        'desc': 'នេះគឺជាអត្ថបទរបស់ខ្ញុំ'
      }
    };
    
    // Process translation
    $(document).ready(()=>{
      $("#language").change(function(){
        var lang = $(this).val()
        $('.lang').each(function(index, item){
          $(this).text(arrLang[lang][$(this).attr('id')])
        });
      })
    });
  </script>
</head>
<body>
  <select id="language" class="translate" style="">
      <option value="en">English</option>
      <option value="km">ខ្មែរ</option>
  </select>

  <ul>
    <li class="lang" id="home">Home</li>
    <li class="lang" id="about">About Us</li>
    <li class="lang" id="contact">Contact Us</li>
  </ul>
  <p class="lang" id="desc">This is my description</p>

  <br>
</body>
</html>

如何将这些按钮的效果更改为 select 以便删除按钮？

How can I change the effect of those buttons to the select so I can delete the buttons?

html

javascript

select

translation