JS/JQuery 动态 |仅单击按钮中的前 2 个元素

Question

我有一个 JS 脚本，可以显示/隐藏共享图标，然后单击共享按钮。 该页面上有多个共享按钮。如何将其转变为仅切换与按钮同一行中的那些元素？目前我的脚本会同时切换所有图标。 例如：想象一下每个职位都有一个共享按钮的职位列表。

目前正在使用

function hideInactive() {
    var x = document.getElementsByClassName('social_icons');

    console.log(x.length);

    for (let i = 0 ; i < x.length; i++) {
        if (x[i].style.display === "inline") {
            x[i].style.display = "none";
        } else {
            x[i].style.display = "inline";
        }
    }
}

但这显然会同时切换所有图标。而且不仅仅是相关的。

Answer 1

使用 jQuery

closest()

函数找到您的父行，然后您可以选择该父行中的所有按钮：

$(function(){

  $("button").on("click", function(){
     const parentRow = $(this).closest(".row");
     $(parentRow).find("button").css("display", "none");
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row">
  Row 1
  <button>Row 1 button A</button>
  <button>Row 1 button B</button>
</div>

<div class="row">
  Row 2
  <button>Row 2 button A</button>
  <button>Row 2 button B</button>
</div>

<div class="row">
  Row 3
  <button>Row 3 button A</button>
  <button>Row 3 button B</button>
</div>