Question

我在我的网站上开发了一种使用各种排序选项对div（.ligne）进行排序的方法。按名称，按日期，按状态和按类型排序。我有一个运行良好的jquery代码，我需要更多地工作来减轻它，但它的工作原理。

每个div都有一个子div，当点击div时，孩子div滑动。工作得很好。

我没有使用任何插件，只有bootstrap css。

但是一旦我点击了对我的div进行排序，孩子们的幻灯片就不再适用了。无法从中找到它......

例如，当您第一次加载页面时，尝试单击＆＃34; AGDE CAPE HOTEL＆＃34;，div打开很好。但是一旦你点击箭头对内容进行排序，它就不再有用......

这是我的HTML：

<div class="container titre">

  <div class="row">

  <div class="col-xs-3 text-right">

  <div class="title">PROJECT</div>

    <span id="nom_ASC" class="sort">&#8595;</span> <span id="nom_DSC" class="sort">&#8593;</span>

  </div>

  <div class="col-xs-3 text-right">

    <div class="title">YEAR</div><span id="annee_ASC" class="sort">&#8595; </span> <span id="annee_DSC" class="sort">&#8593;</span>

  </div>

  <div class="col-xs-3 text-right">

    <div class="title">STATUS</div><span id="statut_ASC" class="sort">&#8595;</span> <span id="statut_DSC" class="sort">&#8593;</span>

  </div>

  <div class="col-xs-3 text-right">

    <div class="title">TYPE</div><span id="type_ASC" class="sort">&#8595;</span> <span id="type_DSC" class="sort">&#8593;</span>

  </div>

  </div>

</div>

<div id="index" class="container">

  <div class="row ligne">

    <div class="col-xs-3 nom">130 HOUSING UNITS ROMAINVILLE</div>
    <div class="col-xs-3 annee">2010</div>  
    <div class="col-xs-3 statut">BUILT</div> 
    <div class="col-xs-3 type">LIVE</div> 
    <div class="col-xs-12 content">
    Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari. Vellem aliquis ex vobis robustioribus hunc male dicendi locum suscepisset; aliquanto liberius et fortius et magis more nostro refutaremus istam male dicendi licentiam. Tecum, Atratine, agam lenius, quod et pudor tuus moderatur orationi meae et meum erga te parentemque tuum beneficium tueri debeo.
    </div>

  </div>

  <div class="row ligne">

    <div class="col-xs-3 nom">AGDE CAPE HOTEL</div>
    <div class="col-xs-3 annee">2013</div>  
    <div class="col-xs-3 statut">ON GOING</div> 
    <div class="col-xs-3 type">LEISURE</div> 
    <div class="col-xs-12 content">
    Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari. Vellem aliquis ex vobis robustioribus hunc male dicendi locum suscepisset; aliquanto liberius et fortius et magis more nostro refutaremus istam male dicendi licentiam. Tecum, Atratine, agam lenius, quod et pudor tuus moderatur orationi meae et meum erga te parentemque tuum beneficium tueri debeo.
    </div>

  </div>

  <div class="row ligne">

    <div class="col-xs-3 nom">AIRBUS DELIVERY CENTER</div>
    <div class="col-xs-3 annee">2013</div>  
    <div class="col-xs-3 statut">ON GOING</div>
    <div class="col-xs-3 type">WORK</div> 

  </div>

  <div class="row ligne">

    <div class="col-xs-3 nom">HACHETTE LIVRE HEADQUARTERS</div>
    <div class="col-xs-3 annee">2015</div> 
    <div class="col-xs-3 statut">BUILT</div> 
    <div class="col-xs-3 type">MOVE</div> 

  </div>

  <div class="row ligne">

    <div class="col-xs-3 nom">COLLEGE DE FRANCE</div>
    <div class="col-xs-3 annee">2016</div> 
    <div class="col-xs-3 statut">ON GOING</div> 
    <div class="col-xs-3 type">LEARN</div> 

  </div>

</div>

我的CSS：

body {font-size:12px;line-height:16px;}
.row.ligne {border-top:1px solid black;cursor:pointer}
.content {display:none}
.title {position: absolute}
.titre {position:fixed;width:100%;background-color:white;z-index:100}
#index {padding-top:16px;}
.sort {cursor:pointer}

用于排序的Jquery：

var $divs = $("div.row.ligne");

/* VILLE */

$('#nom_ASC').on('click', function () {
    var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find(".nom").text() > $(b).find(".nom").text();
    });
    $("#index").html(alphabeticallyOrderedDivs);
});

$('#nom_DSC').on('click', function () {
    var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
        return !($(a).find(".nom").text() > $(b).find(".nom").text());
    });
    $("#index").html(alphabeticallyOrderedDivs);
});

/* ANNEE */

$('#annee_ASC').on('click', function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find(".annee").text() > $(b).find(".annee").text();
    });
    $("#index").html(numericallyOrderedDivs);
});

$('#annee_DSC').on('click', function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return !($(a).find(".annee").text() > $(b).find(".annee").text());
    });
    $("#index").html(numericallyOrderedDivs);
});

/* STATUT */

$('#statut_ASC').on('click', function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find(".statut").text() > $(b).find(".statut").text();
    });
    $("#index").html(numericallyOrderedDivs);
});

$('#statut_DSC').on('click', function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return !($(a).find(".statut").text() > $(b).find(".statut").text());
    });
    $("#index").html(numericallyOrderedDivs);
});

/* TYPE */

$('#type_ASC').on('click', function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find(".type").text() > $(b).find(".type").text();
    });
    $("#index").html(numericallyOrderedDivs);
});

$('#type_DSC').on('click', function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return !($(a).find(".type").text() > $(b).find(".type").text());
    });
    $("#index").html(numericallyOrderedDivs);
});

和div的Jquery打开（slideToggle）

  $('.ligne').click(function () {

    $(this).siblings().children(".content").slideUp(500);
    $(this).children(".content").slideToggle(500)

  });

这是一个jsfiddle，看看它在行动： http://jsfiddle.net/C2heg/726/

感谢，

Answer 1

$('body').on('click', '.ligne', function () {

    $(this).siblings().children(".content").slideUp(500);
    $(this).children(".content").slideToggle(500)

  });

Working Demo

看看Event binding on dynamically created elements?

slideToggle div onclick，带有div排序选项

1 个答案: