在ASPX中使用JQUERY不起作用

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

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项目中，他们很好地工作？感谢您的帮助）：

来源

2017-05-08 Peter

在你的第二个例子中，你没有添加JavaScript代码。这就是为什么不能工作。我已经在第二个示例链接中添加了JavaScript代码并且它正在工作 –

如果您看到页面的源代码，则应该注意到您的ASPX页面的ID正在被修改。需要在ClientIdMode中（https://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx） –

可能是您的脚本尝试使用Ids修改元素时，那些元素尚未呈现。你有没有尝试把你的脚本放入jQuery的document ready？

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

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

来源

2017-05-08 05:46:44 Bhavik

在ASPX中使用JQUERY不起作用

回答

相关问题