Javascript 在ASPX中使用JQUERY不会'；行不通

我整个星期都在努力使这段代码正常工作，但没有成功

基本上，下面的代码在HTML/CSS/JS/JQUERY（）中可以很好地工作，但是当我将代码复制到我的ASPX项目中时，如果它不工作的话

HTML

JS

我在ASPX项目中没有看到任何错误，但它不工作。文本/信息不是循环的，它只是一个静态网站

（）

.盒子{
宽度：400px；
高度：110px；
背景颜色：灰色；
保证金：0自动；
}
分区中心img{
垫面：5px；
左侧填充：5px；
浮动：左；
}
分区p{
文本对齐：居中；
线高：110px；
}
#大盒子p{
文本对齐：居中；
}
功能NEXTMG（一）{
if（messages.length==i）{
i=0；
}
$（'#c1'）.html（c1[i]）.fadeIn（500）、delay（1000）、fadeOut（500）；
$（'#c2'）.html（c2[i]）.fadeIn（500）、delay（1000）、fadeOut（500）；
$（'#c3'）.html（c3[i]）.fadeIn（500）.delay（1000）.fadeOut（500）；
$（'#c4'）.html（c4[i]）.fadeIn（500）.delay（1000）.fadeOut（500）；
$（“pic1”）.attr（“src”，img[i]）.fadeIn（500）、delay（1000）、fadeOut（500）；
$（“pic2”）.attr（“src”，img[i]）.fadeIn（500）、delay（1000）、fadeOut（500）；
$（“#pic3”）.attr（“src”，img[i]）.fadeIn（500）、delay（1000）、fadeOut（500）；
$（“pic4”）.attr（“src”，img[i]）.fadeIn（500）、delay（1000）、fadeOut（500）；
$（'#title'）.html（messages[i]）.fadeIn（500）.delay（1000）.fadeOut（500，function（）{
下一步（i+1）；
});
};
变量消息=[
“麦德林”，
“波哥大”，
“卡利”，
“卡塔赫纳”，
“巴兰基拉”
];
变量c1=[
“朱莉安娜1号”，
“朱莉安娜2号”，
“朱丽安娜3号”，
“朱莉安娜4号”，
“朱莉安娜5号”，
];
变量c2=[
“佩德罗1号”，
“佩德罗2号”，
“佩德罗3号”，
“佩德罗4号”，
“佩德罗5号”，
];
变量c3=[
“佩德里托1号”，
“佩德里托2号”，
“佩德里托3号”，
“佩德里托4号”，
“佩德里托5号”，
];
变量c4=[
“科提科1号”，
“科提科2号”，
“科提科3号”，
“科提科4号”，
“科提科5号”，
];
var img=[
"http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png",
"https://www.landinst.com/images/placeholder-100x100.png",
"http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png",
"https://www.landinst.com/images/placeholder-100x100.png",
"http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png",
]
$（'#title'）.hide（）；
$（'#c1'）.hide（）；
$（'#c2'）.hide（）；
$（'#c3'）.hide（）；
$（'#c4'）.hide（）；
$（'#pic1'）.hide（）；
$（'#pic2'）.hide（）；
$（'#pic3'）.hide（）；
$（'#pic4'）.hide（）；
nextsg（0）；

---

为什么在ASPX项目中没有修改ID为的元素，而在标准HTML项目中它们工作得很好？感谢您的帮助）：

当您的脚本尝试使用ID修改元素时，您可能会看到这些元素尚未呈现。您是否尝试过将脚本放入jQuery的

文档就绪

$(documemt).ready(function () {
    //Script operations here

      $('#title').hide();
      .
      .
      .
}

---

在第二个示例链接中，您没有添加javascript代码。这就是为什么不工作。我已经在你的第二个示例链接中添加了javascript代码，它正在工作。如果你看到页面的源代码，你应该注意到你的ASPX页面的ID正在被修改。需要将其保存在ClientMode（）中

.box {
    width: 400px;
    height: 110px;
    background-color: grey;
    margin: 0 auto;
}

div .center-img {
    padding-top: 5px;
    padding-left: 5px;
    float: left;
}

div div p {
    text-align: center;
    line-height: 110px;
}

#big-box p {
    text-align: center;
}

function nextMsg(i) {
    if (messages.length == i) {
        i = 0;
    }
    $('#c1').html(c1[i]).fadeIn(500).delay(1000).fadeOut(500);
    $('#c2').html(c2[i]).fadeIn(500).delay(1000).fadeOut(500);
    $('#c3').html(c3[i]).fadeIn(500).delay(1000).fadeOut(500);
    $('#c4').html(c4[i]).fadeIn(500).delay(1000).fadeOut(500);
    $("#pic1").attr("src", img[i]).fadeIn(500).delay(1000).fadeOut(500);
    $("#pic2").attr("src", img[i]).fadeIn(500).delay(1000).fadeOut(500);
    $("#pic3").attr("src", img[i]).fadeIn(500).delay(1000).fadeOut(500);
    $("#pic4").attr("src", img[i]).fadeIn(500).delay(1000).fadeOut(500);
    $('#title').html(messages[i]).fadeIn(500).delay(1000).fadeOut(500, function() {
        nextMsg(i + 1);
    });
};

var messages = [
    "MEDELLIN",
    "BOGOTA",
    "CALI",
    "CARTAGENA",
    "BARRANQUILLA"
    ];

var c1 = [
    "JULIANA 1",
    "JULIANA 2",
    "JULIANA 3",
    "JULIANA 4",
    "JULIANA 5",
    ];

var c2 = [
    "PEDRO 1",
    "PEDRO 2",
    "PEDRO 3",
    "PEDRO 4",
    "PEDRO 5",
    ];

var c3 = [
    "PEDRITO 1",
    "PEDRITO 2",
    "PEDRITO 3",
    "PEDRITO 4",
    "PEDRITO 5",
    ];

var c4 = [
    "KOTICO 1",
    "KOTICO 2",
    "KOTICO 3",
    "KOTICO 4",
    "KOTICO 5",
    ];

var img = [
  "http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png",
  "https://www.landinst.com/images/placeholder-100x100.png",
  "http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png",
  "https://www.landinst.com/images/placeholder-100x100.png",
   "http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png",
]

$('#title').hide();
$('#c1').hide();
$('#c2').hide();
$('#c3').hide();
$('#c4').hide();
$('#pic1').hide();
$('#pic2').hide();
$('#pic3').hide();
$('#pic4').hide();


nextMsg(0);

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>

    <style type="text/css">
        .box {
            width: 400px;
            height: 110px;
            background-color: grey;
            margin: 0 auto;
        }

        div .center-img {
            padding-top: 5px;
            padding-left: 5px;
            float: left;
        }

        div div p {
            text-align: center;
            line-height: 110px;
        }

        #big-box p {
            text-align: center;
        }
    </style>
    <script type='text/javascript'>
        function nextMsg(i) {
            if (messages.length == i) {
                i = 0;
            }
            $('#c1').html(c1[i]).fadeIn(500).delay(1000).fadeOut(500);
            $('#c2').html(c2[i]).fadeIn(500).delay(1000).fadeOut(500);
            $('#c3').html(c3[i]).fadeIn(500).delay(1000).fadeOut(500);
            $('#c4').html(c4[i]).fadeIn(500).delay(1000).fadeOut(500);
            $("#pic1").attr("src", img[i]).fadeIn(500).delay(1000).fadeOut(500);
            $("#pic2").attr("src", img[i]).fadeIn(500).delay(1000).fadeOut(500);
            $("#pic3").attr("src", img[i]).fadeIn(500).delay(1000).fadeOut(500);
            $("#pic4").attr("src", img[i]).fadeIn(500).delay(1000).fadeOut(500);
            $('#title').html(messages[i]).fadeIn(500).delay(1000).fadeOut(500, function () {
                nextMsg(i + 1);
            });
        };

        var messages = [
            "MEDELLIN",
            "BOGOTA",
            "CALI",
            "CARTAGENA",
            "BARRANQUILLA"
        ];

        var c1 = [
            "JULIANA 1",
            "JULIANA 2",
            "JULIANA 3",
            "JULIANA 4",
            "JULIANA 5",
        ];

        var c2 = [
            "PEDRO 1",
            "PEDRO 2",
            "PEDRO 3",
            "PEDRO 4",
            "PEDRO 5",
        ];

        var c3 = [
            "PEDRITO 1",
            "PEDRITO 2",
            "PEDRITO 3",
            "PEDRITO 4",
            "PEDRITO 5",
        ];

        var c4 = [
            "KOTICO 1",
            "KOTICO 2",
            "KOTICO 3",
            "KOTICO 4",
            "KOTICO 5",
        ];

        var img = [
          "http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png",
          "https://www.landinst.com/images/placeholder-100x100.png",
          "http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png",
          "https://www.landinst.com/images/placeholder-100x100.png",
           "http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png",
        ]

        $('#title').hide();
        $('#c1').hide();
        $('#c2').hide();
        $('#c3').hide();
        $('#c4').hide();
        $('#pic1').hide();
        $('#pic2').hide();
        $('#pic3').hide();
        $('#pic4').hide();


        nextMsg(0);
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="big-box">
            <p id="title" runat="server"></p>
            <div class="box">
                <div>
                    <img src="http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png" class="center-img" id="pic1">
                </div>
                <div>
                    <p id="c1" runat="server"></p>
                </div>
            </div>

            <div class="box">
                <div>
                    <img src="http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png" class="center-img" id="pic2">
                </div>
                <div>
                    <p id="c2" runat="server"></p>
                </div>
            </div>

            <div class="box">
                <div>
                    <img src="http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png" class="center-img" id="pic3">
                </div>
                <div>
                    <p id="c3" runat="server"></p>
                </div>
            </div>

            <div class="box">
                <div>
                    <img src="http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png" class="center-img" id="pic4">
                </div>
                <div>
                    <p id="c4" runat="server"></p>
                </div>
            </div>
        </div>

    </form>
</body>
</html>

$(documemt).ready(function () {
    //Script operations here

      $('#title').hide();
      .
      .
      .
}