0

プロトタイプでナビゲーション機能の有効性をテストしようとしています。ページの左側に、ページから流れ出る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>

私がどこに迷うのか、何か考えはありますか？

4

2 に答える 2

1

理解した。以下は、リスト内のリンクを非アクティブ化し、リンクIDに基づいて事前に決定された順序付けられていないシーケンスをステップ実行し、クリックすると、リンクを非アクティブ化し、シーケンス内の次のリンクをアクティブ化するコードです。javascript：

<script>
    var linkInterceptor = function(event) {
    if($(event.target).hasClass("active")) {
    $('a').removeClass("active");

    // assume links have class="nextlink_##"
    var nextTarget = $(event.target).attr('class');
    var nextId = nextTarget.substr(9);
    $('#' + nextId).addClass("active");

    return true;
    } else {
    event.preventDefault();
    }
    };

    $('a').on('click', linkInterceptor);
</script>

そして、最終的なHTMLのサンプル：

    <div style="width:1024px; height:768px;">
    <div style="width:298px; height:708px; overflow-y: scroll; overflow-x:hidden; float:left; padding-bottom:-20px; margin-bottom:-20px;">
        <li><a class="nextlink_13" id="12" target="frame2" href="instruction_13.html">Name 1</a></li>
        <li><a class="nextlink_11" id="10" target="frame2" href="instruction_11.html">Name 2</a></li>
        <li><a class="nextlink_20" id="19" target="frame2" href="instruction_20.html">Name 3</a></li>
        <li><a class="nextlink_3" id="2" target="frame2" href="instruction_3.html">Name 4</a></li>
        <li><a class="nextlink_16" id="15" target="frame2" href="instruction_16.html">Name 5</a></li>
    </div>
    </div>

リストの長さは30名なので、上記で切り捨てました。計画されたランダム性を実現するために、優先順位に基づいてIDに番号を付けました。

于 2012-05-18T20:08:04.613 に答える
0

動作する小さなJSFiddleを作成しました。http://jsfiddle.net/79ZFR/

基本的に、現在のクリックハンドラーを削除してから、次の番号にクリックハンドラーを追加します。

    function AddClick(number) {
        $("#" + number).click(function () {
            $("#" + number).off('click');
            AddClick(number+1);
        });
    }​

次に、ロード時に初期化するだけです。

    $(function () {
        AddClick(1);
    });

私のHTMLは次のとおりです。

<ul>
    <li><a id="1" href="#">1</a></li>
    <li><a id="2" href="#">2</a></li>
    <li><a id="3" href="#">3</a></li>
    <li><a id="4" href="#">4</a></li>
    <li><a id="5" href="#">5</a></li>
</ul>

ただし、ランダム化する場合は、バックエンドで簡単に行うことができます。

これではiframeを使用しませんでした。

注：最後のイベントでは、停止タイマーイベントを処理する必要があります。

編集：

ランダム化されたリストの場合、バックエンドでそれを実行し、次のようなHTMLを生成します。

<ul>
    <li><a id="5" href="#">5</a></li>
    <li><a id="3" href="#">3</a></li>
    <li><a id="1" href="#">1</a></li>
    <li><a id="4" href="#">4</a></li>
    <li><a id="2" href="#">2</a></li>
</ul>
于 2012-05-14T17:07:47.030 に答える