Question

初学者试图学习，所以前面的代码很乱。我正在完成我的第二个项目，它是一个照片查看器。主页面上有一个导航，使用ajax加载网站的各个部分。该项目是一个照片查看器，我想这样做，以便每次访问该网站时，都会显示一张不同的照片，这就是我的javascript的前两行：

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

我将很快复制完整的html和javascript。我的问题是，当你回到主页，图片的主页，从网站的另一部分，我也想要一张不同的照片。但是，实际上，这不会发生，因为第二次通过ajax请求返回时，javascript文件没有运行。

如果您想查看以下网站的地址：

http://maxruiz-parana.com

这是代码：

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



});

关于导航方法：

$( 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');
        });

我试过在回调函数中复制js文件的前两行，用于对应于主页的if语句，如下所示：

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

但这不起作用。任何帮助赞赏。感谢

Answer 1

据我所知，这只是你身边的复制粘贴错误：

如果您尝试在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"; }结构中粘贴2行代码，请执行以下操作：

@Id

它应该工作。请记住硬刷新以避免在更改代码时出现缓存问题。

在上面的示例中，您尝试将代码放在图库页面而不是索引页面上。

Ajax没有加载代码

1 个答案: