2017-05-05 58 views
1

我有兩個按鈕。點擊任何按鈕,它必須顯示我點擊了哪個按鈕。但我的代碼不起作用。當我點擊按鈕時,將顯示按鈕的相應ID。我不明白錯誤在哪裏。謝謝。jquery點擊功能不顯示

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

+0

您的按鈕沒有類.btn。 jQuery選擇器什麼都不返回 – user3154108

+1

你有一個類型錯誤'(「#two」)。html。()'它應該是'$(「#2」)。html()' –

+0

有時候,小錯誤可能會導致很大的頭痛。其工作非常感謝 – PAVAN

回答

0

應該

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

而且不

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

其次把你的JavaScript在你的代碼是多少最好

+0

感謝朋友,它的工作。 – PAVAN

0

試試這個:

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

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

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

}); 

}); 
</script> 

首先,你缺失的jQuery符號$,並添加一個額外的.html功能

+0

感謝朋友的工作 – PAVAN

+0

@PAVAN你是最受歡迎的。 – Ashiquzzaman

0

你做錯字附近html.(),並在腳本中錯過了$("#two").。它應該是:

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

}); 
0

請檢查此項。它正在工作。

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
\t $(".btn").click(function(){ 
 
     var qn=$(this).attr("id"); 
 
    alert(qn) 
 
\t }); 
 
}); 
 
</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代碼替換我的代碼。