javascript - Html 链接(一个 )'s with different id' s 为它自己的容器 div 触发相同的功能

Question

我有几个隐藏了不同内容的 div，但它们有一个带有唯一 ID 的链接。我怎样才能使所有这些按钮触发相同的功能并使其仅适用于它们自己的容器？

$(document).ready(function() {

  $("#:input[id^='myBtn_']").click(function() {
    showPopup();
  });

  $(".modal-content").click(function() {

    $(this).hide();
    $("#mask").hide();

  });

});

function showPopup() {
  // show the mask
  $("#mask").fadeTo(500, 0.25);

  // show the popup
  $(".modal-content").show();
}

* {
  margin: 0, padding 0
}
#mask {
  position: absolute;
  margin: 0 auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  display: none;
  z-index: 10000;
}
.modal-content {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 25%;
  width: 450px;
  height: auto;
  margin: 10px auto;
  border: 1px solid #333;
  background-color: #ffff;
  color: #000;
  cursor: pointer;
  padding: 10px;
  position: relative;
  z-index: 10001;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toptop">
  <h4>test1</h4>
  <div class="someclass">Title</div>

  <a href="javascript:;" id="myBtn test1">Read more...</a>
  <div class="modal" id="myModal test1">
    <div id="mask">&nbsp;</div>
    <div class="modal-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>


  </div>


  <div class="toptop">
    <h4>test2</h4>
    <div class="someclass">Title</div>

    <a href="javascript:;" id="myBtn test2">Read more...</a>
    <div class="modal" id="myModal test2">
      <div id="mask">&nbsp;</div>
      <div class="modal-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>


    </div>

Answer 1

ID 始终需要是唯一的。给它一个类，并将其作为您的事件。像这样。

<a href="javascript:;" class="button" id="myBtn">Read more...</a>

$("a.button").click(function( e ) {
      showPopup( $(this) );
});

function showPopup( element ) {
    // show the mask
    element.next('#mask').fadeTo(500, 0.25);

}