0

我有一个 Jquery Mobile可折叠集，它可以有任意数量的“抽屉”。JQM 像这样分配角点：

  collapsibleHeading.find("a").first()
      ...
      .add( ".ui-btn-inner", $el )
         .addClass( "ui-corner-top ui-corner-bottom" )

我想为可折叠添加一个水平选项，因此它也可以像标签框一样工作。我已经准备好了 CSS，但是单个语句中的角落很难......

我需要检查方向，我正在这样做：

 (o.directon) == true/false

这就是我所拥有的：

// predefine classes for HORIZONTAL(first,last,rest) and VERTICAL
baseCorners = o.direction == "horizontal" ? [ "ui-corner-tl", "ui-corner-tr", "" ] : ["ui-corner-top", "ui-corner-top", "ui-corner-top"],
toggleCorners = o.direction == "horizontal" ? [ "ui-corner-bl", "ui-corner-br", "" ] : ["ui-corner-bottom","ui-corner-bottom","ui-corner-bottom" ],

所以现在我可以分配baseCorners和toggleCorners而不必担心方向。

我的问题：如何为第一个/最后一个/剩余的可折叠项添加检查/过滤器，以便我可以在一个语句中运行它，如下所示：

  collapsibleHeading.find("a").first()
      ...
      .add( ".ui-btn-inner", $el )
         .addClass( "if-first" ? baseCorners[0] : "elseif-last" ? baseCorners[1] "else" baseCorners[2] + "same for toggleCorners" )

问题：
我迷路了……知道这是否可能吗？感谢帮助。

编辑：
这就是我现在所拥有的：

.filter(":first")
    .add( ".ui-btn-inner", $el )
        .addClass( baseCorners[0] + toggleCorners[0] ).end()
.filter(":last")
    .add( ".ui-btn-inner", $el )
        .addClass( baseCorners[1] + toggleCorners[1] ).end()
.not(':first').not(':last')
        .add( ".ui-btn-inner", $el )
            .addClass( baseCorners[2] + toggleCorners[2] );

虽然不确定这是最可行的解决方案

解决方案：
感谢大家的帮助。这就是我最后的做法。一旦我设置了建议的解决方案，我发现 JQM 为每个元素运行脚本，所以我不能使用循环，因为每次运行时，只有 1 个元素需要循环。

这样它的工作原理：

 // if not horizontal, I always assign the same class
 baseCorners = o.direction == "horizontal" ? [ "A", "B", "C" ] : ["D", "D", "D"],
 toggleCorners = o.direction == "horizontal" ? [ "E", "F", "G" ] : ["H","H","H" ],
 // get position of current element and calculate trigger
 collIndex = $('div:jqmData(role="collapsible-set") div:jqmData(role="collapsible") h3').index(collapsibleHeading),
 collTrigg = collIndex == 0 ? 0 : collIndex == $('div:jqmData(role="collapsible-set") div:jqmData(role="collapsible")').length-1 ? 1 : 2;

使用这种设置，第一个元素总是得到索引 0，最后一个总是索引 1 以及索引 2 之间的所有内容，所以我对两者之间的元素数量保持灵活。

那么它只是：

 $el.add( ".ui-btn-inner", $el )
      .addClass( baseCorners[collTrigg] + toggleCorners[collTrigg] );

好的！

4

2 回答 2

1

这应该是一样的。这并不是说它的代码少了很多，但它避免了重复，因此应该更容易维护。

selection.each(function(i,e) {

    var el = $(e),
        index = i===0 ? 0 :
            i===selection.length-1 ? 1 : 
            2;

    el.add( ".ui-btn-inner", $el )
        .addClass( baseCorners[index] + toggleCorners[index] );

});
于 2012-06-28T18:46:17.663 回答
1

我正要使用“i”变量发布对频繁回答的更改，但他们只是更新了他们的答案来做到这一点。所以我想我会根据频繁的原始答案发布一个答案：

http://jsfiddle.net/8gYcL/1/

它绝对不如检查“i”变量那么有效，但我想向您展示如何使用它:)

于 2012-06-28T19:18:53.000 回答