0

I'm trying to test the effectiveness of a navigational function in my prototype. On the left side of the page, I have an unordered list with 30 list items that flows off of the page. On the right side of the page is a prompt that is asking users to click through the navigational items in a randomized sequence.

The right and left side are displayed inside of iFrames, with the clicks on the left navigation updating the content on the right and in turn prompting users to click on the next item in the sequence. I'd like to avoid having all 30 list items live at once, to avoid test users erroneously clicking any item other than the next item in the sequence. Is it possible, using jQuery (or anything else, for that matter), to have the HREF in the navigation track the order of my sequence and link each item when it appears in the sequence and be unlinked when it does not appear next in the sequence?

Thanks.

EDIT:

I've made a bit of headway here. My javascript is still not producing the desired result (disable all links except for the current link in the sequence, and once click, disable the link and activate the next one in the sequence). I've simplified the scope of the list to make the problem easier to handle for now. 

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);

And here is the 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>

Any idea where I'm going astray?

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 回答