Jquery 具有类似属性的按钮

我有5个按钮，它们共享同一个类，但有各自的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>

$（.common”）。在（“单击”）上，函数（事件）{
event.preventDefault（）；
var translateText=$（“.common”）.text（）；
如果（$（“#洗手间”）.text（）=“洗手间？”）{
translateText=“最近的浴室在哪里？”；
}else if（$（“#atm”）.text（）=“atm？”）{
translateText=“最近的银行或ATM在哪里？”；
}else if（$（“#train”）.text（）=“train？”）{
translateText=“最近的火车在哪里？”；
}else if（$（“#coffee”）.text（）=“coffee？”）{
translateText=“我在哪里可以喝到一杯好咖啡？”；
}else if（$（“#餐厅”）.text（）=“餐厅？”）{
translateText=“镇上最好的餐厅是什么？”；
}else if（$（“#市场”）.text（）=“市场？”）{
translateText=“最近的市场在哪里？”；
}; 
常见问题：

卫生间？
自动取款机？
火车？
咖啡
餐厅？
市场？

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

$（.common”）。在（“单击”）上，函数（事件）{
event.preventDefault（）；
让translateText=$（this.text（）；
让我们提问；
如果（translateText==“洗手间？”）{
问=“最近的浴室在哪里？”；
}else if（translateText==“ATM？”）{
问=“最近的银行或自动取款机在哪里？”；
}否则如果（translateText==“列车？”）{
问=“最近的火车在哪里？”；
}else if（translateText==“咖啡？”）{
问=“我在哪里可以买到一杯好咖啡？”；
}else if（translateText==“餐厅？”）{
问=“镇上最好的餐厅是什么？”；
}else if（translateText==“市场？”）{
问=“最近的市场在哪里？”；
}
if（translateText）
$（'问题'）。文本（问题）；
})；

常见问题：

卫生间？
自动取款机？
火车？
咖啡
餐厅？
市场？

一种更简洁、更易于缩放和维护的方法是使用对象存储值，使用术语作为键，使用数据属性将术语存储在按钮上

const translations={
“洗手间”：“最近的浴室在哪里？”，
“atm”：“最近的银行或atm在哪里？”，
“火车”：“最近的火车在哪里？”，
“咖啡”：“我在哪里可以买到一杯好咖啡？”
}
$（'.common'）。单击（函数（）{
//`this`是发生事件的元素
const term=$（this.data（'term'）；
const translateText=翻译[术语]；
//对课文做点什么
console.log（translateText）；
})；

常见问题：

卫生间？
自动取款机？
火车？
咖啡？

每一个按钮都有一个唯一的id，您可以对其进行比较，这样您就不必向下搜索并获取内部文本。不知道为什么不使用它。编辑：但是，正如答案所示，您需要使用对单击的按钮的引用，而不是进行查找。谢谢@Majed，我感谢您的后续操作！不幸的是，当我在我的代码中运行它会在目标语言中翻译单词restroom。我可能没有像我需要的那样清楚。我正在将变量translateText传递给接受“问题”的函数并使用谷歌翻译到选定的语言。这会改变什么吗？我还在学习，并感谢反馈。再次感谢这与我的代码的一些调整工作。非常感谢！