Question

我有这两个脚本，一个按div类（price）中的值对div进行排序，另一个根据带有按钮的类名显示或隐藏div。（框a，框b等，在“父”类中。）

问题是它们不能一起工作，你可以显示一个类但不按价格对结果进行排序，价格排序只能同时对所有div进行排序，然后在需要重新加载后中断。

小提琴：

有没有办法让一个脚本同时执行这两个操作？让你根据类显示隐藏div，并按价格（升序/降序）和反之分类对结果进行排序？

我希望这是有道理的。

根据班级名称显示/隐藏Div的脚本：

var $boxs = $("#parent > .box");
var $btns = $(".btn").on("click", function() {

var active = 
$btns.removeClass("active")
  .filter(this)
  .addClass("active")
  .data("filter");

$boxs
.hide()
.filter( "." + active )
.fadeIn(450);

});

基于类值排序Div的脚本：

$('#byPrice').on('click', function () {
 $('#parent div.price').map(function () {
  return {val: parseFloat($(this).text(), 10), el: this.parentNode};
 }).sort(function (a, b) {
  return a.val - b.val;
 }).map(function () {
  return this.el;
 }).appendTo('#parent');
});
$('#byPrice1').on('click', function () {
 $('#parent div.price').map(function () {
   return {val: parseFloat($(this).text(), 10), el: this.parentNode};
 }).sort(function (a, b) {
   return b.val - a.val;
 }).map(function () {
   return this.el;
 }).appendTo('#parent');
});

示例产品分部：

 <div id="parent">

    <div class="box a">
        <div class="product_box">   
            <div class="price">19.99</div>
            </div>
    </div>

 <div/>

Answer 1

我稍微修改了你的小提琴代码。请检查一下，如果您正在寻找，请告诉我们：

http://jsfiddle.net/qjwL1pqa/6/

进行了以下修改：

1）从排序按钮中删除了btn类：

<button class="" id="byPrice">BY PRICE ￪</button>
<button class="" id="byPrice1">BY PRICE ￬</button>

2）对于排序我们只需要考虑所有可见的价格，所以修改后的代码如下：

$('#parent div.price:visible').map(function () {

3）在迭代时将最顶层的div节点与类box一起引用：

el: this.parentNode.parentNode

希望它会对你有所帮助。

使用Javascript隐藏/显示Div并按值排序？

1 个答案: