0

我正在使用 MVC4 生成一个包含许多元素的动态列表。例如，此类的标记如下：

    <ul>
<li class="item" data-price="1" data-categoryid="200,300,400">
<!-- further markup -->
</li>
<li class="item" data-price="4" data-categoryid="210,310,400">
<!-- further markup -->
</li>
<li class="item" data-price="3" data-categoryid="220,030,430">
<!-- further markup -->
</li>
<li class="item" data-price="6" data-categoryid="250,300,410">
<!-- further markup -->
</li>
</ul>

上述标记的数据是在页面加载时通过控制器操作的 MVC 模型填充的。

我有很多我想用这个标记实现的事情，我需要帮助。对于初学者，在我的页面上我也有许多与上面的“data-categoryid”属性相对应的复选框。例如，我有复选框 200、300 等。当用户选中这些框中的任何一个时，我只想显示包含 data-categoryid 属性中复选框值的 li 标签？

当用户在其中选择价格时，我也有一个下拉菜单，我希望根据 li 中的“data-price”属性订购 li 标签？

我正在使用 jquery 和淘汰赛（热衷于学习这个），所以希望使用这些来完成这个。

我已将标记添加到http://jsfiddle.net/tE6fb/

我必须就上述问题提出进一步的问题。如前所述，我通过控制器返回视图等填充了此类内容。当用户向下滚动页面时，我将使用无限滚动来进行服务器端调用以返回下一个 li 标签列表并将它们附加到上面。我正在考虑易于使用，在服务器上填充部分视图并返回它的内容并附加到标记。

另一种方法是不通过服务器端而是通过客户端在开始时加载标记，并将 li 标签与敲除绑定。但是我担心，通过使用这种方法，第一次加载时页面上没有任何标记，从而导致用户延迟，并且搜索引擎机器人也无法索引此标记。我对上述的理解是正确的还是有更好的方法？

4

1 回答 1

0

http://api.jquery.com/

var $li = $('ul li');
$('input[type=checkbox]').change(function(){
   $li.filter('[data-categoryid*='+ this.value +']').toggle(this.checked);
});

$('select').change(function(){
    $li.sort(function(a, b){
        return a.dataset.price > b.dataset.price 
    }).appendTo('ul');
});

http://jsfiddle.net/zPfWj/

于 2013-02-05T22:50:36.390 回答