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

Question

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

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

小提琴：

https://jsfiddle.net/qjwL1pqa/4

有没有办法让一个脚本同时兼具两者？让您可以根据类显示隐藏 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) 迭代时引用类 box 的最顶层 div 节点：

el: this.parentNode.parentNode

希望对你有所帮助。