Question

我想使用键盘和鼠标导航图像（单击左右箭头图像）。

我正在使用Jquery来做这件事，但共享的imgIndex似乎是从.keydown函数和.click函数中删除的...每当.keydown函数 - 或者imgIndex，都没有改变索引还用于点击功能？所以它们不应该总是在同一个索引上吗？

keydown功能：

<script type="text/javascript">
var imgArray = [<?php echo implode(',', getImages($site)) ?>];

$(document).ready(function() {      

    var img = document.getElementById("showimg");
    img.src = imgArray[<?php echo $imgid ?>];
    var imgIndex = <?php echo $imgid ?>;
    alert(imgIndex);

    $(document).keydown(function (e) {
        var key = e.which;
        var rightarrow = 39;
        var leftarrow = 37;
        var random = 82;

        if (key == rightarrow) 
        {
            imgIndex++;
            if (imgIndex > imgArray.length-1) 
            {
                imgIndex = 0;

            }
            img.src = imgArray[imgIndex];
        }
        if (key == leftarrow) 
        {
            if (imgIndex == 0) 
            {
                imgIndex = imgArray.length;
            }

            img.src = imgArray[--imgIndex];
        }   
    });

点击功能：连接左右可点击图片

enter image description here

    $("#next").click(function() {
        imgIndex++;
            if (imgIndex > imgArray.length-1) 
            {
                imgIndex = 0;
            }
            img.src = imgArray[imgIndex];
    });
    $("#prev").click(function() {
        if (imgIndex == 0) 
            {
                imgIndex = imgArray.length;
            }           
            img.src = imgArray[--imgIndex];
    });
});

这样您就可以了解getImages php函数：

<?php
function  getImages($siteParam) {
include 'dbconnect.php';
if ($siteParam == 'artwork') { 
    $table = "artwork"; 
}       
else { 
    $table = "comics"; 
}   

$catResult = $mysqli->query("SELECT id, title, path, thumb, views, catidFK FROM $table");   
$img = array();
while($row = $catResult->fetch_assoc()) 
{
    $img[] = "'" . $row['path'] . "'";
}
return $img;
}
?>

非常感谢！

脚本所在位置的快照“view image.php”

enter image description here

Answer 1

我认为问题是你将imgIndex定义为＆＃39; ready＆＃39;中的局部变量。处理程序，并尝试用作全局。在这种情况下，prev / next处理程序将获得自己的imgIndex副本。

检查这个小提琴：http://jsfiddle.net/BuddhiP/f2WzJ/

var imgArray = ['img1', 'img2', 'img3', 'img4', 'img5'];
var imgIndex = 3;

$(document).ready(function() {
    var $img = $("#imgIndex");
    $img.text(imgIndex);
    //alert(imgIndex);

    $(document).keydown(function(e) {
        var key = e.which;
        var rightarrow = 39;
        var leftarrow = 37;
        var random = 82;

        if (key == rightarrow) {
            imgIndex++;
            if (imgIndex > imgArray.length - 1) {
                imgIndex = 0;

            }
            //img.src = imgArray[imgIndex];
             $img.text(imgIndex);
        }
        if (key == leftarrow) {
            if (imgIndex == 0) {
                imgIndex = imgArray.length;
            }

            //img.src = imgArray[--imgIndex];
            $img.text(--imgIndex);
        }
    });

    $("#next").click(function() {
        imgIndex++;
        if (imgIndex > imgArray.length - 1) {
            imgIndex = 0;
        }
        $img.text(imgIndex);
        //img.src = imgArray[imgIndex];
    });
    $("#prev").click(function() {
        if (imgIndex == 0) {
            imgIndex = imgArray.length;
        }
        $img.text(--imgIndex);
        //img.src = imgArray[--imgIndex];
    });
});

Answer 2

如果您对点击和按键的处理方式不同

$(document).ready(...)

阻止变量不会被共享。这是因为该块中的代码被视为匿名函数，并且您在其中声明的任何变量都将被覆盖到该块。

对于jquery .keydown和.click方法，index似乎不同步

2 个答案: