以下jQuery無法正常工作。看看

Question

代碼：

<div> 
    <a href="javascript:void(0)" class="back">Back</a> 
    <div class="outer"></div> 
    <a href="javascript:void(0)" class="next">Next</a> 
</div> 
<div> 
    <a href="javascript:void(0)" class="back">Back</a> 
    <div class="outer"></div> 
    <a href="javascript:void(0)" class="next">Next</a> 
</div> 

jQuery代碼：

$('.next').click(function() { 
    $('.next').prev().animate({ 
     scrollLeft: '+=150' 
    }, 200); 
}); 
$('.back').click(function() { 
    $('.back').next().animate({ 
     scrollLeft: '-=150' 
    }, 200); 
}); 

錯誤： 基本上我有相同的類如上更多的代碼，我想滾動它被點擊的代碼。但是上面寫的代碼會滾動頁面上的所有「.outer」。每組代碼都在不同的div中。不提供可滾動的「外部」的內部材料。

Answer 1

用於獲取當前對象

$('.next').click(function() { 
    $(this).prev().animate({ scrollLeft: '+=150'}, 200); 
}); 

$('.back').click(function() { 
    $(this).next().animate({ scrollLeft: '-=150'}, 200); 
}); 

Answer 2

您需要使用當前元素上下文即this執行代碼的簡單使用$(this)。另外動畫父元素的兄弟姐妹這麼穿越了使用$(this).closest('div')然後用.prev()或next()

$(function() { 
    $('.next').click(function() { 
     $(this).closest('div').prev().animate({ 
      scrollLeft: '+=150' 
     }, 200); 
    }); 
    $('.back').click(function() { 
     $(this).closest('div').next().animate({ 
      scrollLeft: '-=150' 
     }, 200); 
    }); 
}); 

Answer 3

不要忘了換你的代碼在文檔準備功能。

<script> 
$(document).ready(function() { 
    $('.next').click(function() { 
     $(this).prev().animate({ scrollLeft: '+=150'}, 200); 
    }); 
    $('.back').click(function() { 
     $(this).next().animate({ scrollLeft: '-=150'}, 200); 
    }); 
}); 
</script> 

另外使用on方法更適合於事件綁定，例如，

<script> 
$(document).ready(function() { 
    $('.next').on('click', function() { 
     $(this).prev().animate({ scrollLeft: '+=150'}, 200); 
    }); 
    $('.back').on('click', function() { 
     $(this).next().animate({ scrollLeft: '-=150'}, 200); 
    }); 
}); 
</script> 

編輯：

由於@GuruprasadRao指出的那樣，我假設你已經但要確保您使用的是HTML5 DOCTYPE，否則你將需要添加類型=「文/ JavaScript的」到您的腳本標記。