0

我正在尝试向剃刀视图动态添加多个可选择的 jQuery：

所以我不能使用：

  $("#selectable").selectable();

因为要使每个元素可选择的 id 将类似于 selectable_x 其中 x 是一个整数。创建可选择项的脚本如下所示：

function getAccordianElement(selectableId, startIdx, endIdx, routes, makeSelectable) {   


        var selectableDiv = $('<div></div>');
        var selectable = $('<ol id=' + selectableId  + '></ol>');
        selectable.addClass("selectable-container");
        selectableDiv.append(selectable);

        for (var i = startIdx; i < endIdx; i++) {
            selectable.append($('<li/>', { "class": "ui-state-default", text: routes[i].Name }));
        };

        if (makeSelectable) {
           selectable.selectable();
        }


        return selectableDiv;
    }

我尝试使用的 CSS 样式如下所示：

   .selectable-container.ui-selecting { background: #FECA40; }
    .selectable-container.ui-selected { background: #F39814; color: white; }
 /* ol[id^="selectable_"] .ui-selected { background: #F39814; color: white; } */
    .selectable-container { list-style-type: none; margin: 0; padding: 0; }
    .selectable-container li { margin:1px ; padding: 1px; float: left; width: 27px; height: 25px; font-size: 1em; text-align: center; }

正在创建元素，但未应用 ui-selecting 和 ui-selected 类的 CSS 样式。

想法非常感谢。

TIA。

4

2 回答 2

0

除了使用 id （例如$("#selectable")）你可以使用一个类来代替（例如$(".selectable")）

于 2012-02-25T14:28:42.353 回答
0

上面的代码用于在单个页面上动态创建多个 jQuery 可选择项。上面代码的问题是用于查找这些可选择项并应用适当的选择和选择样式的 CSS 规则。被破坏的规则是：

 .selectable-container.ui-selecting { background: #FECA40; } 
    .selectable-container.ui-selected { background: #F39814; color: white; }

当我将这些规则更改为：

ol[id^="selectable_"] .ui-selecting { background: #FECA40; }
ol[id^="selectable_"] .ui-selected { background: #F39814; color: white; }

由于每个可选择项都被赋予了一个“selectable_x”的 id，其中 x 是一个整数，因此样式已成功应用。

于 2012-02-26T05:30:23.950 回答