0

我有一页上有 20 个左右的文本框。使用 Jquery 有一种方法可以让用户在每个框中键入 1 到 5 之间的数字，并阻止他们再次重新输入相同的数字，或者如果他们这样做，则可以更改他们的选择。

例如，我在第一个框中输入 3，在第十个框中输入 1，在第十四个框中输入 5。然后我在第二个框中输入 1，因此 Jquery（或其他）将第十个框重置为零并允许我继续输入。

我也尝试在第九个框中输入 6，但我不允许，因为范围仅为 1-5。

也许有更好的方法来适应这个功能，我愿意接受建议。我试图实现的基本功能是允许用户表达对 1-20 所列项目的偏好。他们只能选择 5 个项目，并且需要按重要性对它们进行 1-5 的评分。

我考虑过下拉菜单，但问题会相似。

4

1 回答 1

0

也许处理这种 UI 的更好方法是允许用户在不输入的情况下对它们进行排序。通过拖动进行排序感觉更加自然，并且不需要像多次将手从鼠标移到键盘那样的中断。这是一个使用 jQuery UI 的可排序功能的示例小提琴。我在前 5 个项目上设置了一个类，以突出那些进入前 5 个项目的项目。

请记住：nth-​​child 不起作用 < IE9，因此您需要另一种在旧浏览器中设置样式的方法。

http://jsfiddle.net/bxprs/1/

HTML

<ul id="sortable">
    <li class="item">
        <p>Item 1</p>
    </li>
    <li class="item">
        <p>Item 2</p>
    </li>
    <li class="item">
        <p>Item 3</p>
    </li>
    <li class="item">
        <p>Item 4</p>
    </li>
    <li class="item">
        <p>Item 5</p>
    </li>
    <li class="item">
        <p>Item 6</p>
    </li>
    <li class="item">
        <p>Item 7</p>
    </li>
    <li class="item">
        <p>Item 8</p>
    </li>
    <li class="item">
        <p>Item 9</p>
    </li>
    <li class="item">
        <p>Item 10</p>
    </li>
</ul>

CSS

.item {
    width:100%;
    height:50px;
    background: grey;
    color:white
}
li:nth-child(-n+5) {
    background: green;   
}

jQuery

$("#sortable").sortable();
于 2013-06-18T11:27:51.800 回答