javascript - 变量不会在 jQuery 函数中递增？

Question

当我遇到代码问题时，我只是在做最后一分钟的接触：

$(document).ready(function() 
{
/* Declaring some variables to help with scrolling through my Portfolio */
var workArray = [];
var scrollPos = 1;

/* This makes the left scroll arrow disappear if it's 
at the start (scrollPos is less then or equal to 1) */
if (scrollPos <= 1) {
    $('#left_scroll').hide();
} else {
    $('#left_scroll').show();
}

/*This SHOULD decrement and increment values to the scrollPos variable
when the corresponding arrows are clicked*/ 
$('#left_scroll').click(function(){
    scrollPos--;
});
$('#right_scroll').click(function(){
    scrollPos++;
});

(left_scroll) 被分配给我页面上的箭头键，该箭头键假设从值 (scrollPos) 中减去，该值告诉何时应该可见左箭头或右箭头图像。

目前我将值 scrollPos 设置为 1，所以左箭头键是不可见的，而右箭头键是可见的，但是由于某种原因，当任何一个被单击时，它看起来好像没有任何值被更改为左箭头键保持不可见。

任何人都可以看到我的代码有任何问题，希望您能提供帮助。:D

• 马丁

Answer 1

点击处理程序只是在做你告诉他们做的事情，那就是递增和递减。您没有告诉处理程序做任何其他事情，例如 somehide和show.

将逻辑放在处理函数内部hide和show内部，以便在单击按钮时隐藏和显示。

Answer 2

工作 jsFiddle 演示

if您必须在递增/递减后调用您的语句。为此创建一个函数：

function checkScrollPos() {
    /* This makes the left scroll arrow disappear if it's 
    at the start (scrollPos is less then or equal to 1) */
    if (scrollPos <= 1) {
        $('#left_scroll').hide();
    } else {
        $('#left_scroll').show();
    }
}

在你之后click，调用它：

$('#left_scroll').click(function(){
    scrollPos--;
    checkScrollPos();
});
$('#right_scroll').click(function(){
    scrollPos++;
    checkScrollPos();
});

Answer 3

你的代码：

if (scrollPos <= 1) {
    $('#left_scroll').hide();
} else {
    $('#left_scroll').show();
}

只执行一次。如果您想在scrollPos每次单击箭头时检查值，请使用以下函数：

function hideOrShow(scrollPos) {    
    if (scrollPos <= 1) {
        $('#left_scroll').hide();
    } else {
        $('#left_scroll').show();
    }
}

$('#left_scroll').click(function(){
    scrollPos--;
    hideOrShow(scrollPos)
});
$('#right_scroll').click(function(){
    scrollPos++;
    hideOrShow(scrollPos)
});