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

希望会帮助您 demo for you

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;
}

DEMO

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

Answer 4

使用已设置的数据属性

wbc=read.csv(file="https://archive.ics.uci.edu/ml/machine-learning- 
databases/breast-cancer-wisconsin/breast-cancer-wisconsin.data",header = 
FALSE)
wbc[wbc=='?']=NA  #replacing '?' with NA
a=sapply(wbc,function(x) sum(is.na(x))) #analyse the number of NA in each column
print(a)
library(Hmisc)
wbc$V7=impute(wbc$V7,mode)  #impute missing values with mode in V7
wbc$V11[wbc$V11==2]=0; #V11 has either '2' or '4' as entries, replacing '2' with '0' and '4' with '1' 
wbc$V11[wbc$V11==4]=1;
model <- glm(V11~V2+V3+V4+V5+V6+V7+V8+V9+V10,family=binomial(),data=wbc) #

OUTPUT:


Call:  glm(formula = V11 ~ V2 + V3 + V4 + V5 + V6 + V7 + V8 + V9 + V10, 
family = binomial(), data = wbc)

Coefficients:
(Intercept)           V2           V3           V4           V5           V6          
V71         V710  
8.6625       0.4511      -0.1013       0.4842       0.2206       0.1684     
-18.7466     -14.8168  
V72          V73          V74          V75          V76          V77          
V78          V79  
-17.6684     -16.0272     -15.3552     -16.3765       0.7704     -16.2944     
-16.6171           NA  
V8           V9          V10  
0.5052       0.1144       0.4550  

Degrees of Freedom: 698 Total (i.e. Null);  681 Residual
Null Deviance:      900.5 
Residual Deviance: 102.9    AIC: 138.9

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

jQuery：单击按钮以显示具有ID的覆盖

4 个答案: