具有相似属性的按钮

Question

我有 5 个按钮共享相同的 class 但有各自的 ID。单击每个按钮时应翻译与该按钮关联的文本。不幸的是，它推迟到第一个按钮。这是我的点击事件代码。我还包括了 html。感谢您的帮助！

$(".common").on("click", function (event) {
    event.preventDefault();
    var translateText = $(".common").text();
    if ($("#restroom").text() === "Restroom?") {
        translateText = "Where is the nearest bathroom?";
    } else if ($("#atm").text() === "ATM?") {
        translateText = "Where is the nearest bank or ATM?";
    } else if ($("#train").text() === "Train?") {
        translateText = "Where is the nearest train?";
    } else if ($("#coffee").text() === "Coffee?") {
        translateText = "Where can I get a good cup of coffee?";
    } else if ($("#restaurant").text() === "Restaurant?") {
        translateText = "What is the best restaurant in town?";
    } else if ($("#market").text() === "Market?") {
        translateText = "Where is the nearest market?";
    }; 

<div>
        <p>Commonly asked Questions:</p>
        <button type="button" id="restroom" class="btn btn-warning common">Restroom?</button>
        <button type="button" id="atm" class="btn btn-warning common atm">ATM?</button>
        <button type="button" id="train" class="btn btn-warning common">Train?</button>
        <button type="button" id="coffee" class="btn btn-warning common">Coffee?</button>
        <button type="button" id="restaurant" class="btn btn-warning common">Restaurant?</button>
        <button type="button" id="market" class="btn btn-warning common">Market?</button>

Answer 1

您需要获取点击按钮的文字，并相应更改问题的文字：

$(".common").on("click", function (event) {
    event.preventDefault();
    let translateText = $(this).text();
    let question;
    if (translateText === "Restroom?") {
        question = "Where is the nearest bathroom?";
    } else if (translateText === "ATM?") {
        question = "Where is the nearest bank or ATM?";
    } else if (translateText === "Train?") {
        question = "Where is the nearest train?";
    } else if (translateText === "Coffee?") {
        question = "Where can I get a good cup of coffee?";
    } else if (translateText === "Restaurant?") {
        question = "What is the best restaurant in town?";
    } else if (translateText === "Market?") {
        question = "Where is the nearest market?";
    }
    if(translateText)
         $('#question').text(question);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
      <p>Commonly asked Questions:</p>
      <button type="button" id="restroom" class="btn btn-warning common">Restroom?</button>
      <button type="button" id="atm" class="btn btn-warning common atm">ATM?</button>
      <button type="button" id="train" class="btn btn-warning common">Train?</button>
      <button type="button" id="coffee" class="btn btn-warning common">Coffee?</button>
      <button type="button" id="restaurant" class="btn btn-warning common">Restaurant?</button>
      <button type="button" id="market" class="btn btn-warning common">Market?</button>
</div>
<p id="question"></p>

Answer 2

一种更简洁且更易于扩展和维护的方法是使用一个对象来存储值，使用术语作为键和数据属性来存储按钮上的术语。

const translations = {
  "restroom": "Where is the nearest bathroom?",
  "atm": "Where is the nearest bank or ATM?",
  "train": "Where is the nearest train?",
  "coffee": "Where can I get a good cup of coffee?"
}

$('.common').click(function(){
   // `this` is the element the event occurred on
   const term = $(this).data('term');
   const translateText = translations[term];
   // do something with the text
   console.log(translateText);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Commonly asked Questions:</p>
<button type="button" data-term="restroom" class="btn btn-warning common">Restroom?</button>
<button type="button" data-term="atm" class="btn btn-warning common atm">ATM?</button>
<button type="button" data-term="train" class="btn btn-warning common">Train?</button>
<button type="button" data-term="coffee" class="btn btn-warning common">Coffee?</button>

具有相似属性的按钮

Buttons with similar properties

jquery

button

twitter-bootstrap-3