-1
我一直試圖讓這段代碼工作,但沒有任何成功。在ASPX中使用JQUERY不起作用
基本上,下面的代碼在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;
}
JS
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>
爲什麼有ID的元素不是被修改了ASPX項目,而在標準的HTML項目中,他們很好地工作?感謝您的幫助):
在你的第二個例子中,你沒有添加JavaScript代碼。這就是爲什麼不能工作。我已經在第二個示例鏈接中添加了JavaScript代碼並且它正在工作 –
如果您看到頁面的源代碼,則應該注意到您的ASPX頁面的ID正在被修改。需要在ClientIdMode中(https://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx) –