如何实现单个按钮批量翻译多组输入并固定目标语言

问题 #

点击“Translate”按钮翻译多组输入内容时，目标语言出现错乱；需要为每组固定目标语言：

• 第一组：西班牙语
• 第二组：荷兰语
• 第三组：印地语
• 第四组：葡萄牙语
  无需手动选择目标语言，点击按钮自动完成所有输入的对应翻译。

修改方案 #

关键调整点 #

1. 为每组的目标语言选择器添加专属标识，区分来源/目标选择器，同时隐藏无需操作的目标选择器
2. 预设每组目标语言的映射关系，确保翻译时语言匹配正确
3. 修正JS中选择器遍历逻辑，为每组目标语言设置固定选中项
4. 修复翻译函数中的元素操作错误，确保翻译结果写入对应输入框
5. 移除重复的按钮点击事件绑定，优化批量翻译逻辑

修改后的完整代码 #

HTML

<div class="input-group">
  <input type="text" value="" class="to-text form-control" name="name_eslang" placeholder="Spanish Word">
  <input spellcheck="false" class="from-text" placeholder="Type to Translate">
  <ul class="transs">
    <li class="row from"><select class="source-select"></select></li>
    <li class="row to"><select class="target-select" disabled style="display:none;"></select></li>
  </ul>
</div>

<div class="input-group">
  <input type="text" value="" class="to-text form-control" name="name_eslang" placeholder="Dutch Word">
  <input spellcheck="false" class="from-text" placeholder="Type to Translate">
  <ul class="transs">
    <li class="row from"><select class="source-select"></select></li>
    <li class="row to"><select class="target-select" disabled style="display:none;"></select></li>
  </ul>
</div>

<div class="input-group">
  <input type="text" value="" class="to-text form-control" name="name_eslang" placeholder="Hindi Word">
  <input spellcheck="false" class="from-text" placeholder="Type to Translate">
  <ul class="transs">
    <li class="row from"><select class="source-select"></select></li>
    <li class="row to"><select class="target-select" disabled style="display:none;"></select></li>
  </ul>
</div>

<div class="input-group">
  <input type="text" value="" class="to-text form-control" name="name_eslang" placeholder="Portuguese Word">
  <input spellcheck="false" class="from-text" placeholder="Type to Translate">
  <ul class="transs">
    <li class="row from"><select class="source-select"></select></li>
    <li class="row to"><select class="target-select" disabled style="display:none;"></select></li>
  </ul>
</div>
<br>
<span id="btn4all" class="btn3">Translate</span>

CSS

.radioact {
  display: inline-flex;
}
.input-group {
  display: flex;
  align-content: stretch;
  width: 75.666667%;
  margin-left: 17%;
  margin-bottom: 15px;
  align-items: center;
}

.btn3 {
  cursor: pointer;
  background: #05203e;
  color: white;
  width: 150px;
  padding: 20px 30px;
  border-radius: 4px;
  display: inline-block;
  text-align: center;
}
.transs {
  list-style: none;
  margin-bottom: 0px;
  width: 15%;
  margin-right: 35px;
}
.from-text, .to-text {
  flex: 1;
  margin: 0 10px;
  padding: 8px;
}

JavaScript

const countries = {
  "ar-SA": "Arabic",
  "bn-IN": "Bengali",
  "da-DK": "Danish",
  "de-DE": "German",
  "el-GR": "Greek",
  "en-GB": "English",
  "es-ES": "Spanish",
  "fa-IR": "Persian",
  "fi-FI": "Finnish",
  "fr-FR": "French",
  "gu-IN": "Gujarati",
  "hi-IN": "Hindi",
  "hu-HU": "Hungarian",
  "id-ID": "Indonesian",
  "it-IT": "Italian",
  "ja-JP": "Japanese",
  "kn-IN": "Kannada",
  "ko-KR": "Korean",
  "ku-TR": "Kurdish",
  "la-VA": "Latin",
  "my-MM": "Burmese",
  "ne-NP": "Nepali",
  "nl-NL": "Dutch",
  "ur-PK": "Pakistani",
  "pa-IN": "Panjabi",
  "pl-PL": "Polish",
  "pt-PT": "Portuguese",
  "ro-RO": "Romanian",
  "ru-RU": "Russian",
  "sq-AL": "Albanian",
  "sr-RS": "Serbian",
  "sv-SE": "Swedish",
  "ta-LK": "Tamil",
  "te-IN": "Telugu",
  "th-TH": "Thai",
  "tr-TR": "Turkish",
  "uk-UA": "Ukrainian",
  "vi-VN": "Vietnamese"
};

// 预设每组的目标语言
const targetLanguages = ["es-ES", "nl-NL", "hi-IN", "pt-PT"];
const inputGroups = document.querySelectorAll(".input-group");
const translateBtn = document.getElementById("btn4all");

// 为每个组初始化选择器
inputGroups.forEach((group, groupIndex) => {
  const sourceSelect = group.querySelector(".source-select");
  const targetSelect = group.querySelector(".target-select");

  // 填充来源语言选择器，默认选中英语
  for (let code in countries) {
    const selected = code === "en-GB" ? "selected" : "";
    sourceSelect.insertAdjacentHTML("beforeend", `<option ${selected} value="${code}">${countries[code]}</option>`);
  }

  // 填充目标语言选择器，固定选中对应语言
  for (let code in countries) {
    const selected = code === targetLanguages[groupIndex] ? "selected" : "";
    targetSelect.insertAdjacentHTML("beforeend", `<option ${selected} value="${code}">${countries[code]}</option>`);
  }
});

// 翻译函数
function translate(fromEl, toEl, targetLangCode) {
  const text = fromEl.value.trim();
  const translateFrom = "en-GB";

  if (!text) {
    toEl.value = "";
    return;
  }

  toEl.setAttribute("placeholder", "Translating...");
  const apiUrl = `https://api.mymemory.translated.net/get?q=${encodeURIComponent(text)}&langpair=${translateFrom}|${targetLangCode}`;

  fetch(apiUrl)
    .then(res => res.json())
    .then(data => {
      let translation = data.responseData?.translatedText || "";
      // 优先取匹配度最高的结果
      data.matches.forEach(item => {
        if (item.id === 0) translation = item.translation;
      });
      toEl.value = translation;
      toEl.setAttribute("placeholder", "Translation");
    })
    .catch(() => {
      toEl.setAttribute("placeholder", "Translation failed");
    });
}

// 批量翻译事件
translateBtn.addEventListener("click", () => {
  inputGroups.forEach((group, index) => {
    const fromEl = group.querySelector(".from-text");
    const toEl = group.querySelector(".to-text");
    translate(fromEl, toEl, targetLanguages[index]);
  });
});

说明 #

• 目标语言选择器被设置为disabled并隐藏，用户无法修改，确保每组翻译目标语言固定
• 通过inputGroups遍历每组输入，确保来源输入、目标输入和目标语言一一对应，避免错乱
• 翻译函数中使用encodeURIComponent处理输入文本，避免特殊字符导致API请求错误
• 添加了错误捕获，翻译失败时提示用户

内容的提问来源于stack exchange，提问作者Anonymous Girl