javascript - 链接同名类，这样当一个被点击时，另一个被赋予一个类

Question

基本上，我是在寻求一种优化此代码的方法。我想将其缩减为几行，因为它对每次点击绑定(bind)都执行相同的操作。

    $("#arch-of-triumph-button").click(function(){
        $("#arch-of-triumph-info").addClass("active-info")
    });
    $("#romanian-athenaeum-button").click(function(){
        $("#romanian-athenaeum-info").addClass("active-info")
    });
    $("#palace-of-parliament-button").click(function(){
        $("#palace-of-parliament-info").addClass("active-info")
    });

有没有办法将“arch-of-triumph”、“romanian-athenaeum”、“palace-of-parliament”存储到一个数组中，然后将它们拉出到一个点击绑定(bind)中？我在想可能是一些串联？

$("+landmarkName+-button").click(function(){
    $("+landmarkName+-info").addClass("active-info")
});

这样的事情有可能吗？预先感谢您的所有回答。

编辑:这是完整的 HTML。

        <div class="landmark-wrapper">
            <div class="page-content landmark">
                <div class="heading span-after">
                    <span>Arch of Triumph</span>
                </div>
                <div class="landmark-button" id="arch-of-triumph-button"></div>                 
            </div>
        </div>
        <div class="landmark-wrapper">
            <div class="page-content landmark">
                <div class="heading span-after">
                    <span>Romanian Athenaeum</span>
                </div>
                <div class="landmark-button" id="romanian-athenaeum-button"></div>                  
            </div>
        </div>


----------------------------------------------------------

        <div class="landmarks-info-wrapper">
            <div class="landmark-info" id="arch-of-triumph-info">
                <div class="info-landmark section">
                    <span class="landmark-title">Arch of Triumph</span>
                    <span class="landmark-coord">44°28′1.99″N 26°4′41.06″E</span>
                </div>
            </div>
            <div class="landmark-info" id="romanian-athenaeum-info">
                <div class="info-landmark section">
                    <span class="landmark-title">The Romanian Athenaeum</span>
                    <span class="landmark-coord">44.4413°N 26.0973°E</span>

                </div>
            </div>

Answer 1

假设您无法修改您的 HTML 标记(在这种情况下使用 CSS 类会更清晰)，您的问题的解决方案如下所示:

// Assign same click handler to all buttons
$("#arch-of-triumph-button, #romanian-athenaeum-button, #palace-of-parliament-button")
.click(function() {

  // Extract id of clicked button
  const id = $(this).attr("id");

  // Obtain corresponding info selector from clicked button id by replacing
  // last occurrence of "button" pattern with info.
  const infoSelector = "#" + id.replace(/button$/gi, "info");

  // Add active-info class to selected info element
  $(infoSelector).addClass("active-info");
});