Question

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

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

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

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

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

Answer 1

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

请记住：n-child不起作用＆lt; 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();

Jquery - 文本框编号首选项

1 个答案: