Question

所以基本上我有这张桌子，里面有六张图片，可以看到漂亮的图片库。在底部的导航栏上，我有一个javascript函数，应该使用一组图像文件源来更改用户单击时表中图像元素的各个标记。当DOM准备好时，所有的javascript都应该执行。问题是，当我尝试单击底部的导航栏时，我得到“无法设置null的src值”，这使得数组无法正常工作或者不是按照方式调用元素它应该是。

这是PHP脚本，它创建表，拉动图像，并在DOM准备好时将它们粘贴到javascript数组中，我有一种潜在的怀疑，即问题的一部分是代码不会执行，除非我在应该创建javascript数组的部分之后包含两个</script>。

<?php

$directory = 'images/gallery/';
$files1 = scandir($directory);
$length = count($files1);
echo "<script $( document ).ready(function() {";
$y = 2;
for ($x = 0; $x < $length-2; $x++) {
echo "images[$x] = 'Images/gallery/$files1[$y]';";
$y= $y + 1;
}
echo "});";
echo"</script>";
echo"</script>";
echo "<table><tr>";
for ($i = 2; $i <= 7; $i++) {
if ($i == 5) {
    echo "</tr><tr>";
}
echo "<td class='galleryImageWrapper'><a href='images/gallery/$files1[$i]' data-lightbox='Gallery'><img id='$i' src='images/gallery/$files1[$i]'></a></td>";
}
echo "</tr></table>";
echo "<div id='galleryNavWrapper'><div onclick='advanceLeft()' id='leftbutton'>&#8656;  </div><ul id='galleryNav'>";
for ($i = 1; $i <= ($length / 6); $i++) {
echo "<li onclick='galleryNavButton(this.value)'>$i</li>";
}
echo '</ul><div id="rightButton" onclick = "advanceRight()">&#8658;</div>';
?>

这是HTML代码

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Perspective by Daniel Streich</title>
    <link rel="stylesheet" type="text/css" href="scripts/css.css">
    <link href="css/lightbox.css" rel="stylesheet">
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/lightbox-2.6.min.js"></script>
    <link href="css/lightbox.css" rel="stylesheet" />
</head>
<body>
    <script>
        var i = 0;
        var images = new Array();
        /*
         $( document ).ready(function() {
         document.write("well this be working");
         });*/
        function advanceLeft() {

            if (i == 0) {
                return false;
            } else {
                i = i - 6;
                for (var x = i; x <= 5; x++) {
                    document.getElementById(x).src = images[x];
                    return true;
                }
            }
        }

        function advanceRight() {
            if (i == images.length - 1) {
                return false;
            } else {
                i = i + 6;
                for (var x = i; x <= 5; x++) {
                    document.getElementById(x).src = images[x];
                    return true;
                }
            }
        }

        function galleryNavButton(newId) {
            i = i - ((i - newId) * 6);
            for (var x = i; i <= 5; x++) {
                document.getElementById(x).src = images[x];
                return true;
            }

        }

    </script>

    <?php
    $active = "Art";
    include ('menu.php');
    ?>

    <div class="wrapperRegular">
        <p class="bigTitle">
            Perspective by Daniel
        </p>
        <p class='actualText'>
            TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
            TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
        </p>
        <?php
        include ('gallery.php');
        ?>
        <br>
        <div id="footer">
            Copyright &#169; Perspective by Daniel
        </div>

    </div>
</body>

如果有人能弄清楚这一点，我会非常感激，因为我不能在我的生命中得到它。

Answer 1

使用以下内容替换<script>内容：

$( document ).ready(function() {
 var i = 0;
        var images = new Array();
        /*
         $( document ).ready(function() {
         document.write("well this be working");
         });*/
        function advanceLeft() {

            if (i == 0) {
                return false;
            } else {
                i = i - 6;
                for (var x = i; x <= 5; x++) {
                    document.getElementById(x).src = images[x];
                    return true;
                }
            }
        }

        function advanceRight() {
            if (i == images.length - 1) {
                return false;
            } else {
                i = i + 6;
                for (var x = i; x <= 5; x++) {
                    document.getElementById(x).src = images[x];
                    return true;
                }
            }
        }

        function galleryNavButton(newId) {
            i = i - ((i - newId) * 6);
            for (var x = i; i <= 5; x++) {
                document.getElementById(x).src = images[x];
                return true;
            }

        }
});

使用jQuery处理点击的示例： echo'⇒'; 变为： echo'⇒';

在您的JQuery脚本中，您只需：

$( document ).ready(function() {
        var i = 0;
        var images = new Array();
        /* This is how you would handle the click */
        $('#rightButton').click(function(){
            advanceRight();
        });
        function advanceLeft() {

            if (i == 0) {
                return false;
            } else {
                i = i - 6;
                for (var x = i; x <= 5; x++) {
                    document.getElementById(x).src = images[x];
                    return true;
                }
            }
        }

        function advanceRight() {
            if (i == images.length - 1) {
                return false;
            } else {
                i = i + 6;
                for (var x = i; x <= 5; x++) {
                    document.getElementById(x).src = images[x];
                    return true;
                }
            }
        }

        function galleryNavButton(newId) {
            i = i - ((i - newId) * 6);
            for (var x = i; i <= 5; x++) {
                document.getElementById(x).src = images[x];
                return true;
            }

        }
});

希望有所帮助

即使DOM已准备就绪，也无法设置null的属性src

1 个答案: