1

同じコードを何度も繰り返すのは非常に面倒なので、スクリプトを関数に変換しようとしています。

スクリプトは、すぐに新しいアコーディオンを保持するコンテナーを選択します。コンテナ内のすべてのアコーディオンには、一意のデータソート ID があります。(1 から 10 までソートする必要があります) 次に、それよりも小さいまたは大きい ID を持つアコーディオンがあるかどうかを検出し、それらの間に自分自身を追加します。

スクリプトは、関数内になくても正しく機能します。

関数のないこのスクリプトは正しく動作します

var $container = $('.panel-group[data-group-holder="' + dataPlace + '"]'),
    $d = $container.find('div.panel-default'),
    $n = $('<div class="panel panel-default dragged-true" data-sort="' + dataSort + '"><div class="panel-heading"><h4 class="panel-title"><a class="accordion-toggle sub" data-sort="' + dataSort + '" data-toggle="collapse" href="#main-' + dataSort + '"><div class="remove set"><i class="icon-remove"></i></div>' + dataHtml + ' <b>(<span class="sub-count">0</span>)</b><i class="icon-angle-down"></i></a></h4></div><div id="main-' + dataSort + '" class="panel-collapse in"><div class="panel-body" data-accept="' + dataSort + '"></div></div></div>');
var $a = $d.filter(function () {
    return $(this).data('sort') < dataSort;
}).last();

$(that).parents('div:eq(0)').remove();
/*alert($('.draggable-groups .main-groups[data-sort="' + dataSort + '"]').parents().html());*/

if ($a.length) $a.after($n);
else $container.prepend($n);

この関数は正しく動作しません (ソートされません)

    function placeSort(thisContainer, containerFind, placeHtml, returnCompareOneFind, returnCompareOne, returnCompareTwo, removeClone) {
        var $container = $(thisContainer),
            $d = $container.find(containerFind),
            $n = $(placeHtml);

        if(returnCompareOneFind == "false") {
            var $a = $d.filter(function () {
                return $(this).data(returnCompareOne) < returnCompareTwo;
            }).last();
        } else {
            var $a = $d.filter(function () {
                return $(this).find(returnCompareOneFind).data(returnCompareOne) < returnCompareTwo;
            }).last();
        }

        removeClone;

        if ($a.length) $a.after($n);
        else $container.prepend($n);
    }

function addGroupAccordion(that, dataSort, dataPlace, dataHtml) {
    var thisContainer = '.panel-group[data-group-holder="' + dataPlace + '"]';
    var containerFind = 'div.panel-default';
    var placeHtml = '<div class="panel panel-default dragged-true" data-sort="' + dataSort + '"><div class="panel-heading"><h4 class="panel-title"><a class="accordion-toggle sub" data-sort="' + dataSort + '" data-toggle="collapse" href="#main-' + dataSort + '"><div class="remove set"><i class="icon-remove"></i></div>' + dataHtml + ' <b>(<span class="sub-count">0</span>)</b><i class="icon-angle-down"></i></a></h4></div><div id="main-' + dataSort + '" class="panel-collapse in"><div class="panel-body" data-accept="' + dataSort + '"></div></div></div>';
    var returnCompareOneFind = "false";
    var returnCompareOne = 'sort';
    var returnCompareTwo = dataSort;
    var removeClone = $(that).parents('div:eq(0)').remove();

    placeSort(thisContainer, containerFind, placeHtml, returnCompareOne, returnCompareTwo, removeClone);
}

$(document).on('click','.draggable-groups .main-groups',function(){
        var dataSort = $(this).attr("data-sort");
        var dataPlace = $(this).parents('div:eq(1)').attr("data-group");
        var dataHtml = $(this).html();
        var that = $(this);
        addGroupAccordion(that, dataSort, dataPlace, dataHtml);
        var groupHolder = dataPlace;
        countChildren(groupHolder);
    });

HTML

<div class="panel panel-default">
  <div class="panel-heading main">
    <h4 class="panel-title">
      <a class="accordion-toggle collapsed main side-js" data-parent="#main-panel" data-panel="00" data-toggle="collapse" href="#panel-00">
        <span>0</span>Tellija kulud 
        <b>(<span class="cat-count">0</span>)</b>
        <i class="icon-angle-down"></i>
      </a>
    </h4>
  </div>
  <div id="panel-00" class="panel-collapse collapse">
    <div class="panel-body">

      <div class="panel-group" data-group-holder="00">

      </div>

    </div>
  </div>
</div>

<h3>Main groups</h3>
  <div class="row draggable-groups" data-group="00">
    <div class="col-md-6">
      <div class="main-groups" data-sort="01">01</div>
    </div>
    <div class="col-md-6">
      <div class="main-groups" data-sort="02">02</div>
    </div>
    <div class="col-md-6">
      <div class="main-groups" data-sort="03">03</div>
    </div>
    <div class="col-md-6">
      <div class="main-groups" data-sort="04">04</div>
    </div>
    <div class="col-md-6">
      <div class="main-groups" data-sort="05">05</div>
    </div>
    <div class="col-md-6">
      <div class="main-groups" data-sort="06">06</div>
    </div>
    <div class="col-md-6">
      <div class="main-groups" data-sort="07">07</div>
    </div>
    <div class="col-md-6">
      <div class="main-groups" data-sort="08">08</div>
    </div>
  </div>

jsFiddle を作成すると、これを再作成するのに時間がかかりすぎます。欠けてすみません。

4

1 に答える 1

2

あなたの問題は、合格しようとする問題に帰着する可能性がありますthis

これを試してください：

function addGroupAccordion(self, dataSort, dataPlace, dataHtml) {
    ...
    var removeClone = $(self).parents('div:eq(0)').remove();
    ...
}

$(document).on('click','.draggable-groups .main-groups',function(){
    ...
    var self = this; // 'self' is more standardized
    addGroupAccordion(self, dataSort, dataPlace, dataHtml);
    ...
});

ここで何が起こっているかというとvar that = $(this);、関数で設定していたときに$().on、 を含む jQuery オブジェクトを保存していて、 を使用して関数thisでそれを使用しようとしていたときに、jQuery に次のことを要求していたということです。addGroupAccordion$(that)$($(this))

于 2013-10-09T19:33:18.667 に答える