链接相似名称类,以便在单击一个名称时给另一个名称类

问题描述 投票:1回答:2

[基本上,我正在寻求一种优化此代码的方法。我想将其减少到几行,因为它对每次单击绑定都执行相同的操作。

    $("#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")
    });

是否有可能将“凯旋门”,“罗马尼亚雅典剧院”,“议会宫”存储到数组中并将其拉入单击绑定?我在想一些级联吗?

$("+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>
javascript jquery html css code-cleanup
2个回答
0
投票

假设您无法修改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");
});

0
投票

因为每个.landmark-button看上去都与其相关的.landmark-info顺序相同,所以您可以将两个集合放入一个数组中,然后单击一个集合,只需在另一个数组中找到具有相同索引的元素即可:

const buttons = [...$('.landmark-button')];
const infos = [...$('.landmark-info')];
$(".landmark-button").click(function() {
  const i = buttons.indexOf(this);
  $(infos[i]).addClass('active-info');
});

这完全不依赖于ID-随意将它们从HTML中完全删除以变得混乱,因为它们现在不被用作选择器,因此它们没有任何作用。

实时代码段:

const buttons = [...$('.landmark-button')];
const infos = [...$('.landmark-info')];
$(".landmark-button").click(function() {
  const i = buttons.indexOf(this);
  $(infos[i]).addClass('active-info');
});
.active-info {
  background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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">click</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">click</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>

较旧的答案,不知道HTML:您可以提取所单击按钮的ID,将其button部分切开,然后选择与-info串联在一起的按钮:

$(".landmark-button").click(function() {
    const infoSel = this.id.slice(0, this.id.length - 6) + 'info';
    $(infoSel).addClass('active-info');
  });

不过,考虑到HTML,可能会有更优雅的解决方案。

© www.soinside.com 2019 - 2024. All rights reserved.