これを試してください...このペーストビンにデモも投稿しました。
var newScrollX = $(this).nextAll(".instOf"+myNo+":first");
$(this)それが現在選択されているオブジェクトであると仮定します。
アップデート：
自由を取ってコードをクリーンアップすることを許してください。私のOCDは私にそうせざるを得ませんでした! 以下にいくつかの注意事項を示します。
- 複数の関数を連鎖させ、必要に応じて
.end()( link ) を使用しました。
eval()コードで使用する必要はありません。.prevAll().lengthID には現在の長さが含まれているため、コードの一部を置き換えました。
.substring(2,newScrollX.length); // im4 -> 4
スクロール更新を、リンクと画像クリックの両方で使用する 1 つの関数にまとめました。
- すべてのコメントと未使用の変数を削除しました。あなたが取り組んでいた他の何かを削除した場合は申し訳ありません。
現在の画像表示が変更されました。現在のIDとモジュラス演算子を使用して画像番号を計算しました-コーディングが少なくなります:P
cImDis = ((cIm-1) % totIm) + 1;
脚本
var edge, marginLeft;
var cIm = 1; // make this global
$(document).ready(function(){
edge = $("#navDiv").offset();
marginLeft = edge.left;
$('#projectImages')
.css("background-position",marginLeft+"px 10px")
.children("li").each(function(i){
$(this).css('opacity', 0.0);
})
$("div.personInfo")
.children(".toShow").hide().end()
.each(function(i){
$(this).click(function(){
var tgt = $("#xxx"+(i+1));
if($("#xxx"+(i+1)).is(":visible")){
$("#xxx"+(i+1)).slideUp(150);
} else {
$("#xxx"+(i+1)).slideDown(200);
}
});
});
})
$(window).resize(function(){
edge = $("#navDiv").offset();
marginLeft = edge.left;
})
$(window).load(function(){
cIm =1;
var cImDis =1;
var totIm = parseInt($("#totIm").text(),10);
var totX = 0;
edge = $("#navDiv").offset();
marginLeft = edge.left;
var imageIcons="";
$('#projectImages')
.css("background-position","-1000px 20px")
.children("li:eq(0)").animate({
opacity: 1.0
}, 400 ).end()
.children("li").each(function(i){
if(i>0){
totX = 0;
$(this).parent("ul").children("li:lt("+i+")").each(function(){
totX += $(this).width();
});
$(this).css("left",(totX+marginLeft)+"px");
totX += $(this).width();
$(this).animate({
opacity: 1.0
}, 400 );
} else {
$(this).css("left",marginLeft+"px");
}
imageIcons +="<a class=\"scrollTo\" href=\"#\" rel='im"+(i+1)+"'> • </a>";
});
$("#imageIcons").html(imageIcons);
$("#imageIcons a:eq(0)").addClass("activeImage");
$("h3.phil:eq(0)").children('a').addClass("activeText");
$("a.scrollToText").click(function(){
cImDis = $(this).attr("rel");
var newScrollX = $('#im'+cIm).nextAll(".instOf" + cImDis + ":first").attr('id');
cIm = parseInt(newScrollX.substring(2,newScrollX.length),10);
nextIm();
return false;
})
$("#projectImages li img").click(function(){
cIm++;
cImDis = ((cIm-1) % totIm) + 1; // find remainder
nextIm();
return false;
})
function nextIm(){
var newScrollX = $("#im"+cIm);
var posX = parseInt(newScrollX.css("left"),10);
$('#projectImages').scrollTo((posX-marginLeft)+"px", 350, updateDisplay());
$("#feedback").prepend("<li>(cim:"+cIm+") (cimDis:"+cImDis+")</li>");
}
function updateDisplay(){
$("#cIm").text(cImDis);
$(".activeText").each(function(){
$(this).removeClass("activeText");
});
$("h3.phil:eq("+(cImDis-1)+")").children('a').addClass("activeText");
}
});