2

所以我正在编写一个需要根据 div 的内容进行排序的程序。我想要的是两件事：

  1. 该程序按默认隐藏的孙 div 的项目进行排序。“重量值”是我希望排序的（如果它低于某个点，则将其移至另一张表）

  2. 对项目进行排序时，其中具有某种覆盖的项目将被排序到另一个“不太可能被调用”的表中

所以这是我目前的代码：

<div id="likelyToBeCalled">
    <div class="likelyOddHeader" id="Test1">
        <div class="likelyOddA">Test1</div>
        <div class="likelyOddB"><img src="image002.png"/></div>
        <div class="timeZone">West</div>
    </div>
    <div class="hidden">
            <div class="weight">Weight:56</div>
            <div class="values">Value1: Value Here.  Value 2: Value Here. Value 3: Value Here.  Value 4:  Value here.  Value5: Value here. <br />
                                            DbValue1: 123, DbValue2: 1234, DbValue3, 123456 DbValue4: 123, DbValue5: 1234, DbValue6, 123456</div>
            <div class="overrides">Overrides: 0</div>
    </div>
...More divs / values here

<div id="unlikelyToBeCalled">
    <div class="likelyOddHeader" name="Test3">
        <div class="likelyOddA">Test3</div>
        <div class="likelyOddB"><img src="image002.png"/></div>
        <div class="timeZone">West</div>
    </div>
...More divs / values here

到目前为止，我一直在尝试仅使用 jQuery 来做到这一点，但进展并不顺利。我不知道如何处理'if'逻辑或如何处理排序，我仍在努力从一个区域移动到另一个区域......

我一直在尝试的代码涉及一个提交按钮：

<script type="text/javascript">

$(document).ready(function() {
$("input.buttonDhide").click(function(){ $(".row").find(".left").hide("slow"); });
)};
)};
</script>

编辑：请注意，上面的代码实际上只是为了看看我是否可以这样选择一个元素，它根本不起作用。

编辑：更改标记以使用类，因为我错误地复制了 id，现在全部设置在那里。

4

1 回答 1

1

对我来说，这似乎是knockout.js的完美候选者。您可以直接对绑定到您的 html 结构的 javascript 数组 (ko.observableArray) 进行排序，而不是尝试通过 jQuery 的类或数据属性来查找某个元素进行排序。

这是一个匆忙拼凑在一起的 jsdfiddle，展示了一种可以做到这一点的方法。我不确定您是否要检查重量或覆盖变量，所以我只是使用（如果覆盖 == 1）。你可以很容易地改变它，即（如果重量 < 10）。我强烈建议您阅读一些 Knockout.js 教程。国际海事组织，它很重要... Gorlami！

为了以防万一，我将在此处包含代码。请记住，这可以并且可能应该清理一下：

HTML：

<div data-bind="with: likelyToBeCalled">
    <div data-bind="with: likelyOddHeader">
        <div data-bind="text: likelyOddA"></div>
        <div><img data-bind="attr: { src: likelyOddB }" alt="" /></div>
        <div data-bind="text: timeZone"></div>
    </div>
    <div data-bind="foreach: hidden">
        <div data-bind="text: 'Weight: ' + weight"></div>
        <div data-bind="text: 'Values: ' + values"></div>
        <div data-bind="text: 'Overrides: ' + overrides"></div>
    </div>
</div>

<p>
    <button data-bind="click: buttonClick">Sort likely to be called</button>
</p>

<div data-bind="with: unlikelyToBeCalled">
    <div data-bind="with: likelyOddHeader">
        <div data-bind="text: likelyOddA"></div>
        <div><img data-bind="attr: { src: likelyOddB }" alt="" /></div>
        <div data-bind="text: timeZone"></div>
    </div>
    <div data-bind="foreach: hidden">
        <div data-bind="text: 'Weight: ' + weight"></div>
        <div data-bind="text: 'Values: ' + values"></div>
        <div data-bind="text: 'Overrides: ' + overrides"></div>
    </div>
</div>

还有 JS（不要忘记包含 knockout.js）：

var viewModel = {
    likelyToBeCalled: {
        likelyOddHeader: {
            likelyOddA: "Test1",
            likelyOddB: "image001.png",
            timeZone: "West"
        },
        hidden: ko.observableArray([
            { weight: 56, values: "your values string 1", overrides: 1 },
            { weight: 20, values: "your values string 2", overrides: 0 },
            { weight: 12, values: "your values string 3", overrides: 0 },
            { weight: 16, values: "your values string 4", overrides: 1 }
        ])
    },
    unlikelyToBeCalled: {
        likelyOddHeader: {
            likelyOddA: "Test2",
            likelyOddB: "image002.png",
            timeZone: "East"
        },
        hidden: ko.observableArray([
            { weight: 1, values: "your values string 4", overrides: 1 }
        ])
    },
    buttonClick: function () {
        var likely = viewModel.likelyToBeCalled;
        var unlikely = viewModel.unlikelyToBeCalled;

        for (var i in likely.hidden()) {
            if (likely.hidden()[i].overrides == 1) {
                unlikely.hidden.push(likely.hidden()[i]);
                likely.hidden.remove(likely.hidden()[i]);
            }
        }

        likely.hidden.sort(function (a, b) {
            return a.weight > b.weight ? 1 : -1;
        });
    }
};

ko.applyBindings(viewModel);
于 2012-07-11T01:45:01.163 回答