プロトタイプでナビゲーション機能の有効性をテストしようとしています。ページの左側に、ページから流れ出る30個のリストアイテムを含む順序付けられていないリストがあります。ページの右側には、ランダム化された順序でナビゲーションアイテムをクリックするようにユーザーに求めるプロンプトがあります。
右側と左側がiFrame内に表示され、左側のナビゲーションをクリックすると右側のコンテンツが更新され、ユーザーはシーケンス内の次の項目をクリックするように求められます。テストユーザーがシーケンス内の次のアイテム以外のアイテムを誤ってクリックしないように、30個のリストアイテムすべてを一度にライブにすることは避けたいと思います。jQuery(またはその他のこと)を使用して、ナビゲーション内のHREFでシーケンスの順序を追跡し、シーケンスに表示されたときに各アイテムをリンクし、次に表示されないときにリンクを解除することは可能ですか?順序?
ありがとう。
編集:
ここで少し前進しました。私のJavaScriptはまだ望ましい結果を生成していません(シーケンス内の現在のリンクを除くすべてのリンクを無効にし、クリックしたらリンクを無効にしてシーケンス内の次のリンクをアクティブにします)。今のところ、問題を処理しやすくするために、リストの範囲を簡略化しました。
var linkInterceptor = function(event) {
if($(event.target).hasClass("active")) {
$('a').removeClass("active");
// assume links have class="nextlink_##"
var nextTarget = $(event.target).getAttr('class');
var nextId = nextTarget.substr(9);
$('#' + nextId).addClass("active");
return true;
} else {
event.preventDefault();
}
};
$('a').on('click', linkInterceptor);
そしてここにHTMLがあります
<div style="width:1024px; height:768px;">
<div style="width:298px; height:708px; overflow:scroll; float:left;">
<a class="nextlink_2" id="1" target="frame2" href="instruction_2.html">img</a>
<a class="nextlink_3" id="2" target="frame2" href="instruction_3.html">img</a>
<a class="nextlink_4" id="3" target="frame2" href="instruction_4.html">img</a>
<a class="nextlink_5" id="4" target="frame2" href="instruction_5.html">img</a>
<a id="5" target="frame2" href="instruction_6.html">img</a>
</div>
<div style="width:726px; float:left;">
<iframe src="instruction_1.html" width="726" height="100%" scrolling="auto" frameborder="0" id="frame2"></iframe>
</div>
</div>
私がどこに迷うのか、何か考えはありますか?