bug^君 2017-08-02 14:35 采纳率: 25%
浏览 28

Ajax未加载代码

beginner trying to learn, so messy code ahead. I am finishing my second project which is a photo viewer. There is a navigation on the main page that loads the various sections of the website using ajax. The project being a photo viewer, I wanted to make it so that every time you visit the site, a different photo shows to begin with, which is what the very first two lines of my javascript do:

var random = Math.floor(Math.random() * 31) + 1;
document.getElementById("front").src = "Images/PARANA/Image" + random + ".jpg";

I will copy the full html and javascript shortly. My problem is that I would like that when you come back to the home page, where the pictures are, from another section of the site, a different photo shows as well. But, as it is, this doesn't happen as the javascript file is not running the second time you come back to it through an ajax request.

Here is the site's address if you would like to see:

http://maxruiz-parana.com

and here is the code:

html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Max Ruiz | Parana</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="allIntro">
  <div>
    <video playsinline autoplay loop id="bgvid" class="visible" >
      <source src="Images/PARANA/newIntro.mp4" type="video/mp4">
    </video>
  </div>

  <div id="presentacion">
    <h1>PARANA</h1>
    <h2>PHOTOGRAPHIES DE MAX RUIZ</h2>
  </div>
 </div>

<div id="header">
  <div id="title"><h1>MAX RUIZ <span id="parana">PARANÁ</span></h1></div>
      <nav class="cf" id="menu">
      <ul>
      <li><a href="contact.html">CONTACT</a></li>
      <li><a href="bio.html">BIO</a></li>
       <li><a href="about.html">ABOUT</a></li>
        <li><a href="gallery2.html" id="gall">GALLERY</a></li>
        <li><a href="index.html" id="home" class="current">HOME</a></li>
      </ul>
      </nav>
</div>

<section id="content">

<div id="container">

  <div id="imagewrap">
    <img src="Images/PARANA/Image1.jpg" id="front" class="bigImage" />

    <div id="info">Verde</div>


    <div id="previous" class="buttons"></div>

    <div id="next" class="buttons"></div>
  </div>

</div>

</section> <!-- end of container -->

<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>
</body>
</html>

js

var random = Math.floor(Math.random() * 31) + 1;
    document.getElementById("front").src = "Images/PARANA/Image" + random + ".jpg";

    $( "#content" ).hide();

    $( '#header' ).hide();

    $( document ).ready(function() {

        counter = random;
        displayArrows();
        updateInfo(counter);


    //set up video and text//

        var vid = document.getElementById("bgvid");

        function stopVideo() {
        vid.pause();
        $( '#presentacion').delay(3000).hide();
        vid.parent().delay(3000).hide();
        $( '#allIntro' ).hide();
        }

        setTimeout(stopVideo, 3000);

        function showSite() {
        $( '#header' ).delay(1500).fadeIn(2000);
        $( "#content" ).delay(1500).fadeIn(2000);
        }

        showSite();


    //once content loaded

    $( 'body,html' ).dblclick(function(e){
        e.preventDefault();
    });

    //main page functionality nav//

    $( document ).on('click', 'nav a', function(e){
        e.preventDefault();
        var url = this.href;
        $( "nav a.current" ).removeClass("current");
        $(this).addClass("current");
        $( '#container' ).remove();
        $( '#content').load(url + ' #content', function(){

            if (url == 'http://maxruiz-parana.com/contact.html'){
                $( 'title' ).text('Paraná | Contact');
            }
            else if (url == 'http://maxruiz-parana.com/gallery.html'){
                $( 'title' ).text('Paraná | Gallery');
            }
            else if (url == 'http://maxruiz-parana.com/about.html'){
                $( 'title' ).text('Paraná | About');
                $( '#english' ).hide();
            }
            else if (url == 'http://maxruiz-parana.com/bio.html'){
                $( 'title' ).text('Paraná | Bio');
            }
            else if (url == 'http://maxruiz-parana.com/gallery.html'){
                $( 'title' ).text('Max Ruiz | Paraná');
            }
            counter = random;
            $( '#previous' ).css('display', 'none');
        }).hide().fadeIn('slow');
    });




    //main page functionality buttons//

    counter = random;

    $( document ).on('click', '.buttons', function(e){
        if (counter < 1 || counter > 31) {return false;}
        e.preventDefault();
        var id = e.target.id;
        if (id == "next" && counter < 31){counter++;
        } else if (id == "previous" && counter > 1){counter--;}


    $('#front').fadeOut(500, function() {
            getImage(function(){
                $('#front').fadeIn(500);
            });
    });

    updateInfo(counter);

    });

    getImage = function (cb) {
      var img = new Image();
      img.onload = function () {
        document.getElementById("front").src = img.src;
        cb();
        };
      img.src = "Images/PARANA/Image" + counter + ".jpg";

      displayArrows();

    }

    function displayArrows() {
        if (counter == 1) {
            $( '#previous' ).css('display', 'none');
        }
        else if (counter > 1 && counter < 31) {
            $( '#previous' ).css('display', 'block');
            $( '#next' ).css('display', 'block');
        }
        else if (counter == 31) {
          $( '#next' ).css('display', 'none');
        }
    }





    // gallery functionality//

    $( document ).on('click', '.littleImages', function(e){

        $( '#gall' ).removeClass("current");
        $( '#home' ).addClass("current");

        var imageSource = $(this).attr('src');

    // find the not square picture from the square source

        var n = imageSource.lastIndexOf('/');

        var result = imageSource.substring(n + 1);

        var imageSourceFinal = 'Images/PARANA/' + result;


    // find the counter in order to know if it's the last or the first picture and hide corr arrow

        counter = imageSource.match(/\d+/g);

        $( '#container' ).remove();

        $( '#content').load('index.html' + ' #content', function(){

            $( '#front' ).attr('src', imageSourceFinal);

            if (counter == 1) { $( '#previous' ).css('display', 'none');}
            if (counter == 31){ $( '#next' ).css('display', 'none');}

            // updateInfo(counter);
            testFunction(counter[0]);

        }).hide().fadeIn('slow');

    });



    // legend for pictures functionality

    $( document ).on('mouseover', '#front', function(){
        $( '#front').fadeTo(300, 0.3);
        $( '#info' ).fadeTo(300, 1);
    });

    $( document ).on('mouseout', '#front', function(){
        $( '#front').fadeTo(300, 1);
        $( '#info' ).fadeTo(300, 0);
    });

    function testFunction(number){

        switch(number) {
            case "1":
              $( '#info').text('Verde');
              break;
            case "2":
                $( '#info').text('Pardo');
                break;
            case "3":
              $( '#info').text('Ivinhema');
              break;
            case "4":
                $( '#info').text('Guayquiraró');
                break;
            case "5":
              $( '#info').text('Monday');
              break;
            case "6":
                $( '#info').text('Paranapanema');
                break;
            case "7":
              $( '#info').text('Salado');
              break;
            case "8":
                $( '#info').text('Piquiri');
                break;
            case "9":
              $( '#info').text('Gualeguay');
              break;
            case "10":
                $( '#info').text('Negro');
                break;
            case "11":
              $( '#info').text('Santa Lucía');
              break;
            case "12":
                $( '#info').text('Ivai');
                break;
            case "13":
              $( '#info').text('Corriente');
              break;
            case "14":
                $( '#info').text('Luján');
                break;
            case "15":
              $( '#info').text('Paraguay');
              break;
            case "16":
                $( '#info').text('Iguazú');
                break;
            case "17":
              $( '#info').text('Aguapey');
              break;
            case "18":
                $( '#info').text('Victoria');
                break;
            case "19":
              $( '#info').text('Tieté');
              break;
            case "20":
                $( '#info').text('Pardo');
                break;
            case "21":
                $( '#info').text('Yabeberi');
                break;
            case "22":
                $( '#info').text('Ñacaguazú');
                break;
            case "23":
                $( '#info').text('Tapenagá');
            case "24":
                $( '#info').text('Arazá');
                break;
            case "25":
                $( '#info').text('Tupicuá');
                break;
            case "26":
                $( '#info').text('Añiá');
                break;
            case "27":
                $( '#info').text('Tamanduatey');
                break;
            case "28":
                $( '#info').text('Aguapey');
                break;
        }
    }

    function updateInfo(number) {

        switch(number) {
            case 1:
              $( '#info').text('Verde');
              break;
            case 2:
                $( '#info').text('Pardo');
                break;
            case 3:
              $( '#info').text('Ivinhema');
              break;
            case 4:
                $( '#info').text('Guayquiraró');
                break;
            case 5:
              $( '#info').text('Monday');
              break;
            case 6:
                $( '#info').text('Paranapanema');
                break;
            case 7:
              $( '#info').text('Salado');
              break;
            case 8:
                $( '#info').text('Piquiri');
                break;
            case 9:
              $( '#info').text('Gualeguay');
              break;
            case 10:
                $( '#info').text('Negro');
                break;
            case 11:
              $( '#info').text('Santa Lucía');
              break;
            case 12:
                $( '#info').text('Ivai');
                break;
            case 13:
              $( '#info').text('Corriente');
              break;
            case 14:
                $( '#info').text('Luján');
                break;
            case 15:
              $( '#info').text('Paraguay');
              break;
            case 16:
                $( '#info').text('Iguazú');
                break;
            case 17:
              $( '#info').text('Aguapey');
              break;
            case 18:
                $( '#info').text('Victoria');
                break;
            case 19:
              $( '#info').text('Tieté');
              break;
            case 20:
                $( '#info').text('Pardo');
                break;
            case 21:
                $( '#info').text('Yabeberi');
                break;
            case 22:
                $( '#info').text('Ñacaguazú');
                break;
            case 23:
                $( '#info').text('Tapenagá');
            case 24:
                $( '#info').text('Arazá');
                break;
            case 25:
                $( '#info').text('Tupicuá');
                break;
            case 26:
                $( '#info').text('Añiá');
                break;
            case 27:
                $( '#info').text('Tamanduatey');
                break;
            case 28:
                $( '#info').text('Aguapey');
                break;
        }
    }


// About functionality

$( document ).on('click', '#enButton', function(){
    $( '#english' ).fadeIn();
    $( '#french' ).fadeOut();
});

$( document ).on('click', '#frButton', function(){
    $( '#english' ).fadeOut();
    $( '#french' ).fadeIn();
});



});

On the method for the navigation:

$( document ).on('click', 'nav a', function(e){
            e.preventDefault();
            var url = this.href;
            $( "nav a.current" ).removeClass("current");
            $(this).addClass("current");
            $( '#container' ).remove();
            $( '#content').load(url + ' #content', function(){

                if (url == 'http://maxruiz-parana.com/contact.html'){
                    $( 'title' ).text('Paraná | Contact');
                }
                else if (url == 'http://maxruiz-parana.com/gallery.html'){
                    $( 'title' ).text('Paraná | Gallery');
                }
                else if (url == 'http://maxruiz-parana.com/about.html'){
                    $( 'title' ).text('Paraná | About');
                    $( '#english' ).hide();
                }
                else if (url == 'http://maxruiz-parana.com/bio.html'){
                    $( 'title' ).text('Paraná | Bio');
                }
                else if (url == 'http://maxruiz-parana.com/gallery.html'){
                    $( 'title' ).text('Max Ruiz | Paraná');
                }
                counter = random;
                $( '#previous' ).css('display', 'none');
            }).hide().fadeIn('slow');
        });

I have tried copying the first two lines of the js file inside the call back function for the if statement that corresponds to the home page like so:

else if (url == 'http://maxruiz-parana.com/gallery.html'){
                    $( 'title' ).text('Max Ruiz | Paraná');

    var random = Math.floor(Math.random() * 31) + 1;
    document.getElementById("front").src = "Images/PARANA/Image" + random + ".jpg";
}

But this is not working. Any help appreciated. Thanks

  • 写回答

1条回答 默认 最新

  • 程序go 2017-08-02 15:20
    关注

    As far as I can tell, it's just a copy-paste error on your side:

    if you try to paste the 2 lines of code in your if-else if structure, like this:

    if (url == 'http://maxruiz-parana.com/contact.html'){
            $( 'title' ).text('Paraná | Contact');
        }
        else if (url == 'http://maxruiz-parana.com/gallery.html'){
            $( 'title' ).text('Paraná | Gallery');
        }
        else if (url == 'http://maxruiz-parana.com/about.html'){
            $( 'title' ).text('Paraná | About');
            $( '#english' ).hide();
        }
        else if (url == 'http://maxruiz-parana.com/bio.html'){
            $( 'title' ).text('Paraná | Bio');
        }
        else if (url == 'http://maxruiz-parana.com/gallery.html'){
            $( 'title' ).text('Max Ruiz | Paraná');
        }
        else if (url == 'http://maxruiz-parana.com/index.html'){
            $( 'title' ).text('Max Ruiz | Index');
            var random = Math.floor(Math.random() * 31) + 1;
            document.getElementById("front").src = "Images/PARANA/Image" + random + ".jpg";
        }

    It should work. Please remember to hard-refresh to avoid caching issues when changing your code.

    In your example above, you tried to put the code on the gallery page instead of the index page.

    评论

报告相同问题？

悬赏问题

  • ¥20 我想使用一些网络协议或者部分协议也行，主要想实现类似于traceroute的一定步长内的路由拓扑功能
  • ¥30 深度学习，前后端连接
  • ¥15 孟德尔随机化结果不一致
  • ¥15 apm2.8飞控罗盘bad health，加速度计校准失败
  • ¥15 求解O-S方程的特征值问题给出边界层布拉休斯平行流的中性曲线
  • ¥15 谁有desed数据集呀
  • ¥20 手写数字识别运行c仿真时，程序报错错误代码sim211-100
  • ¥15 关于#hadoop#的问题
  • ¥15 (标签-Python|关键词-socket)
  • ¥15 keil里为什么main.c定义的函数在it.c调用不了