Jquery:单击按钮以显示带有 id 的叠加层

Question

我有多个按钮和覆盖层。 单击按钮时，我希望它显示附加到每个按钮的特定覆盖层。

$(".button").click(function() {
  $(".overlay:visible").hide();
  $("#" + $(this).attr("data-showdiv")).show();
})

.overlay {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <button class="button" id="button1" href="#" data-showdiv="overlay1">Click here for more Information</button>
</div>
<div class="overlay" id="overlay1">
  <h1>Title</h1>
  <img src="" alt="topic image">
  <p>Topic text 1</p>
  <p class="cross">X</p>
</div>

如何使它发挥作用以显示每个按钮的正确叠加层？

Answer 1

希望对您有所帮助 为您演示

.css：

.overlay {
  display: none;
}

.HTML：

<div>
  <button class="button" id="button1" href="#" data-showdiv="overlay1">Click here for more Information</button>
   <button class="button" id="button2" href="#" data-showdiv="overlay2">Click here for more Information</button>
    <button class="button" id="button3" href="#" data-showdiv="overlay3">Click here for more Information</button>
</div>
<div class="overlay" id="overlay1">
  <h1>Title</h1>
  <img src="" alt="topic image">
  <p>Topic text 1</p>
  <p class="cross">X</p>
</div>
<div class="overlay" id="overlay2">
  <h1>Title2</h1>
  <img src="" alt="topic image">
  <p>Topic text 2</p>
  <p class="cross">X2</p>
</div>
<div class="overlay" id="overlay3">
  <h1>Title3</h1>
  <img src="" alt="topic image">
  <p>Topic text 3</p>
  <p class="cross">X3</p>
</div>

.js：

$(".button").click(function() {
  $(".overlay:visible").hide();
  $("#" + $(this).attr("data-showdiv")).show();
})

如果您不同意，请回复:)

Answer 2

$(".button").on('click', function(e){
    var elId = $(this).data('showdiv'); // Get data attribute
    $(".overlay").hide(); // Hide all overlays
    $("#"+elId).show(); // Better add # direct to data attribute for element, so here we can remove this, btw.: data-showdiv="#overlay1", js: $(elId).show();
    e.preventDefault();
});

Answer 3

这是解决您的问题的方法。你几乎在那里，但需要做一些调整。

.HTML

 <button class="button" id="button1" href="#" data-showdiv="overlay1">Click here for more Information</button>    
 </div>
 <div class="overlay" id="overlay1">
     <h1>Title</h1>
     <img src="" alt="topic image">
     <p>Topic text 1</p>
     <p class="cross">X</p>
</div>
<br/><br/>
 <button class="button" id="button2" href="#" data-showdiv="overlay1">Click here for more Information</button>    
 </div>
 <div class="overlay" id="overlay1">
     <h1>Title</h1>
     <img src="" alt="topic image">
     <p>Topic text 1</p>
     <p class="cross">X</p>
</div>

.JS

$(".button").click(function() {
 $(this).next('.overlay').show();
})

.CSS

.overlay {
  display: none;
}

演示

让我知道这是否解决了您的问题。

Answer 4

使用设置的数据属性

$(".button").on('click', function(){
      var id = $(this).attr("data-showdiv");
      $("#overlay_"+id).show(); 
      //console.log(id); testing to see if the id is correct
}); 

.overlay {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button class="button" id="button_1" href="#" data-showdiv="1">Click here for more Information</button>
</div>
<div class="overlay" id="overlay_1">
  <h1>Title 1</h1>
  <img src="" alt="topic image">
  <p>Topic text 1</p>
  <p class="cross">X</p>
</div>
<div>
  <button class="button" id="button_2" href="#" data-showdiv="2">Click here for more Information</button>
</div>
<div class="overlay" id="overlay_2">
  <h1>Title 2</h1>
  <img src="" alt="topic image">
  <p>Topic text 2</p>
  <p class="cross">X</p>
</div>