在 ASPX 中使用 JQUERY 不起作用答案

【问题标题】：Using JQUERY in ASPX doesn't work在 ASPX 中使用 JQUERY 不起作用
【发布时间】：2017-10-06 00:44:42
【问题描述】：

我整个星期都在努力让这段代码工作，但没有任何成功。

基本上，以下代码在 HTML/CSS/JS/JQUERY (https://jsfiddle.net/epugcycg/5/) 中运行良好，但是当我将代码复制到我的 ASPX 项目中时，如果不起作用。

HTML

<body>

<div id="big-box">
    <p id="title"></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"></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"></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"></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"></p>
        </div>
    </div>
</div>

</body>

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

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

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

(https://jsfiddle.net/kn1tffhh/)

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

为什么在 ASPX 项目中没有修改 ID 的元素，而在标准 HTML 项目中却可以正常工作？感谢您的帮助）：

【问题讨论】：

在您的第二个示例链接中，您没有添加 javascript 代码。这就是为什么不工作。我已在您的第二个示例链接中添加了 javascript 代码，它正在工作
如果您看到页面的来源，您应该注意到您的 ASPX 页面的 ID 正在被修改。需要在 ClientIdMode (msdn.microsoft.com/en-us/library/…)

标签： javascript jquery html css asp.net

【解决方案1】：

当您的脚本尝试修改带有 ID 的元素时，这些元素可能尚未呈现。你试过把你的脚本放在jQuery的document ready里面吗？

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

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

【讨论】：