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プロジェクトにエラーが表示されませんが、動作していません。テキスト/情報はサイクリングではなく、単に静的なウェブサイトです。標準のHTMLプロジェクトで、彼らは完璧に動作しながら、

（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プロジェクトで変更されていないされていますか？あなたの助けをありがとう）：

出典

2017-05-08 Peter

2番目の例では、JavaScriptコードを追加していません。それが働かない理由です。私はあなたの2番目の例のリンクにjavascriptコードを追加し、それが動作しています –

あなたのページのソースが表示されたら、あなたのASPXページのIDが変更されていることに気づくべきです。 ClientIdMode（https://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx）にそれが必要です。 –

あなたのスクリプトがこれらの要素がまだレンダリングされていないIDで要素を修正しようとするときに、 jQueryのdocument readyの中にあなたのスクリプトを入れてみましたか？

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

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

出典

2017-05-08 05:46:44 Bhavik

ASPXでJQUERYを使用すると動作しません

答えて

関連する問題