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

Question

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

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

fiddle :

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:

 <div id="parent">

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

 <div/>

Answer 1

我稍微修改了你的 fiddle 代码。请检查它并让我知道这是否是您要查找的内容:

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

希望对你有所帮助。