如何为每个div ID链接javascript hide / show函数？

Question

我有很多具有相同功能的<p>个。

＆＃13;

＆＃13;

document.getElementById("minus").onclick = function() {
  functionHide()
};

function functionHide() {
  document.getElementById("plus").style.display = "block";
  document.getElementById("minus").style.display = "none";
}

document.getElementById("plus").onclick = function() {
  functionShow()
};

function functionShow() {
  document.getElementById("plus").style.display = "none";
  document.getElementById("minus").style.display = "block";
}

＆＃13;

#plus {
  display: none;
  cursor: pointer;
}

#minus {
  cursor: pointer;
}

.floatright {
  float: right
}

.w50 {
  width: 50%;
  text-align: center;
}

＆＃13;

<div class="w50">

  <p>What paperwork do I need to complete to file for divorce ?
    <span class="floatright inlineb" id="minus">-&nbsp;</span>
    <span class="floatright inlineb" id="plus">+</span>
  </p>

  <p>How do I change my custody and suport orders ?
    <span class="floatright inlineb" id="minus">-&nbsp;</span>
    <span class="floatright inlineb" id="plus">+</span>
  </p>

</div>

＆＃13;

＆＃13;

＆＃13;

当我点击第一个减号（＆＃34; - ＆＃34;）时，它可以正常工作。 但对于第二个，它不起作用。  我想知道如何自动链接所有其他div。他们有相同的打字代码。

另外，我知道如何在点击另一个+时更改最后一个元素（＆＃34; - ＆＃34;）？

以下是我想要做的预览

小提琴：https://jsfiddle.net/khrismuc/prsebqg3/15/

Answer 1

你的逻辑需要稍微复杂一点：

$post

var current = -1;

function handleClick(clicked) {
  $(".w50 p").removeClass("active").find("span").text("+");
  $("#box p").hide();
  if (current === clicked) {
    current = -1;
    return;
  }
  current = clicked;
  $(".w50 p").eq(current).addClass("active").find("span").text("-");
  $("#box p").eq(current).show();
}

$(document).ready(function() {
  $(".w50 p").each(function(i, el) {
    $(this).append($("<span>").text("+"));
    $(this).click(function() {
      handleClick(i);
    });
  });
  $(".w50 p").eq(0).click();
});

.w50 {
  width: 80%;
  text-align: center;
}

.w50 p {
  cursor: pointer
}

.w50 p.active {
  color: orange
}

.w50 p span {
  float: right;
  width: 1em;
  display: inline-block;
}

#box {
  background-color: orange;
  margin: 20px;
  min-height: 6em;
}

#box p {
  display: none;
  padding: 1em
}

Answer 2

您正在使用重复的ID，这是禁忌。以下是使用类和.querySelectorAll的示例。

var minuses = document.querySelectorAll(".minus");
var pluses = document.querySelectorAll(".plus");

minuses.forEach(function(minus) {
  minus.addEventListener('click', functionHide);
});

pluses.forEach(function(plus) {
  plus.addEventListener('click', functionShow);
});

function functionHide() {
  pluses.forEach(function(plus) {
    plus.style.display = "block";
  });
  minuses.forEach(function(minus) {
    minus.style.display = "none";
  });
}

function functionShow() {
  pluses.forEach(function(plus) {
    plus.style.display = "none";
  });
  minuses.forEach(function(minus) {
    minus.style.display = "block";
  });
}

您可以根据自己的具体用途进行修改。