ASP.NET 使用jQUERY 問題

asp.net jquery

su3cl3i001 2020-12-19 18:17:08 ‧ 1670 瀏覽

分享至

不好意思目前在學怎麼在ASP.NET使用JQUERY
照著w3schools用用看
但一直都不會出現範例上的效果請問我是哪裡有弄錯什麼嗎?
範例:https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadein

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="WebApplication1219001.Test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jQuery</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
</head>
<body> 
    <p>Demonstrate fadeIn() with different parameters.</p>
    <form id="form1" runat="server">
        <div>
           
            <asp:Button ID="button" runat="server" Text="效果" />            
           <script type="text/javascript">
               $(document).ready(function () {
                   $("#button").click(function () {
                       $("#div1").fadeIn();
                       $("#div2").fadeIn("slow");
                       $("#div3").fadeIn(3000);
                   });
               });              
        </script>       

        </div>               
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
    <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
    <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
    </form>    
</body>
</html>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

wrxue

iT邦好手 1 級 ‧ 2020-12-19 19:06:03

最佳解答

Button的id看起來跟jquery中選擇器的id不同，一個B開頭一個b開頭

<asp:Button ID="Button" runat="server" Text="效果" />

$("#button")

而且經過master page轉換後，id應該也會有變化？用F12看看你的按鈕ID是什麼吧

回應 5
分享
檢舉

看更多先前的回應...收起先前的回應...

su3cl3i001 iT邦新手 5 級 ‧ 2020-12-19 19:12:00 檢舉

不好意思改好了但還是沒有效果出現

wrxue iT邦好手 1 級 ‧ 2020-12-19 19:15:58 檢舉

f12程式碼可以貼一下嗎，不是用windows沒辦法測，包含button、script的部分、或者看console是否有錯誤訊息

su3cl3i001 iT邦新手 5 級 ‧ 2020-12-19 19:23:42 檢舉

這樣嗎

wrxue iT邦好手 1 級 ‧ 2020-12-19 19:34:06 檢舉

<asp:Button>會解釋為<input>，按下之後會post並跳轉頁面，也就看不到效果，您可以嘗試用
<button ID="button" runat="server">效果</button>

su3cl3i001 iT邦新手 5 級 ‧ 2020-12-19 19:37:56 檢舉

有了謝謝您!

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22201 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙