点击功能上的jquery没有显示

时间:2017-05-05 09:09:32

标签: jquery

我有两个按钮。点击任何按钮,它必须显示我点击了哪个按钮。但我的代码不起作用。当我点击按钮时,将显示按钮的相应ID。我不明白错误在哪里。谢谢。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

  $(".btn").click(function(){

 var qn=$(this).attr("id");  
 ("#two").html.("you clicked on button"+qn);  

 });   

});
</script>
<style>
#one
{
  width:100%;
  height:70px; 
  background-color:green;
  clear:both;
}
#two
{
  width:75%;
  height:250px; 
  overflow-y:scroll;
  float:left;  
}
#three
{
  width:24.5%;
  height:50px;  
  float:right;  
  float:right;   
}
.btn
{
  width:45px;
  height:45px;
  align-text:center;  
}
</style>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three">
   <?php
     $i=1;
     for($i=1;$i<3;$i++)
     {
         echo"<button class='btn' id='$i' value='$i'>$i</button>";
     }
   ?>
</div>
</body>

5 个答案:

答案 0 :(得分:0)

试试这个:

<script>
$(document).ready(function(){

  $(".btn").click(function(){

 var qn=$(this).attr("id");  
 $("#two").html("you clicked on button"+qn);  

 });   

});
</script>

首先你缺少jQuery符号$并在.函数

之后添加额外的html

答案 1 :(得分:0)

应该是

$("#two").html("you clicked on button"+qn);  

而不是

("#two").html.("you clicked on button"+qn);  

其次,将JavaScript放在代码下面是更可取的

答案 2 :(得分:0)

您在html.()附近拼写错误,并且在您的脚本中错过了$ ("#two").。它应该是:

$(document).ready(function(){
    $(".btn").click(function(){
        var qn=$(this).attr("id");  
        $("#two").html("you clicked on button"+qn);  
    });   

});

答案 3 :(得分:0)

请检查一下。它正在发挥作用。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$(".btn").click(function(){
      var qn=$(this).attr("id"); 
  alert(qn)  
	});
});
</script>
<style>
#one
{
  width:100%;
  height:70px; 
  background-color:green;
  clear:both;
}
#two
{
  width:75%;
  height:250px; 
  overflow-y:scroll;
  float:left;  
}
#three
{
  width:24.5%;
  height:50px;  
  float:right;  
  float:right;   
}
.btn
{
  width:45px;
  height:45px;
  align-text:center;  
}
</style>
</head>
<body>

<div id="one"></div>
<div id="two"></div>
<div id="three">
  <button class='btn' id='1' value='1'>1</button>
  <button class='btn' id='2' value='1'>2</button>
  <button class='btn' id='3' value='1'>3</button>
     
  
</div>

</body>
</html>

只需用PHP标记中的for循环替换我的代码。

答案 4 :(得分:0)

您的代码中有错误。

应该是

html(), not html.().

这是一个小提琴:https://jsfiddle.net/3zhw5hja/