jquery - 我想点击一个正方形来显示一条消息，显示每个正方形内的数字与 jquery

Question

JQUERY

$(document).ready(function(){
    $("div").click(function(){
        var pars = $("p");
        for( i=0; i<pars.length; i++ ) {
        alert("Found paragraph: " + pars[i].innerHTML);
    });
});

CSS

.container {
     padding:10%
}

[class*="col-"] > div {
     background:white;height:200px;width:200px;
     padding:20px;
     margin:13%;
 }

.value {
     position: absolute;
     top: 90px;
     left: 130px;
} 

HTML

<div class="container">

<div class="row">
<div class="col-md-4  col-sm-5">
<div style="background-color:pink"><h1 id="test" class="value">1</h1></div>
</div>

<div class="col-md-4 col-sm-5">
<div style="background-color:pink" ><h1 id="test" class="value">2</h1></div>
</div>

<div  class="col-md-4 col-sm-5">
<div style="background-color:yellow" ><h1 id="test" class="value">3</h1></div>
</div>

<div class="col-md-4  col-sm-5">
<div style="background-color:yellow"><h1 id="test" class="value">4</h1></div>
</div>  

<div class="col-md-4 col-sm-5">
<div style="background-color:blue"><h1 id="test" class="value">5</h1></div>
</div>

<div class="col-md-4  col-sm-5">
<div style="background-color:blue" ><h1 id="test" class="value">6</h1></div>
</div>  `

每次我单击一个框时，我都想显示带有框内数字的警报。

我该如何解决这个问题？

Answer 1

Dimitar Popov建议使用 alert($(this).find(".value").html()); 是正确的并添加它做 click处理程序。

您不应该为所有 <div> 添加处理程序s，不过。相反，只定位那些与正方形相对应的 div:

$(document).ready(function(){
    $('[class*="col-"] > div').click(function(){
        alert($(this).find(".value").html());
    });
});

参见 this Fiddle一个工作演示。我还在那里对您的代码做了一些其他小的改进...