iT邦幫忙

1

ASP.NET 使用jQUERY 問題

不好意思 目前在學怎麼在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>

1 個回答

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是什麼吧

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

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

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

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

https://ithelp.ithome.com.tw/upload/images/20201219/20116358OmTZoOknzt.png
這樣嗎

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

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

有了 謝謝您!

我要發表回答

立即登入回答