Question

我正在尝试动态添加多个jQuery selectable到剃刀视图：

所以我不能用：

  $("#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-chosen和ui-selected类的CSS样式。

非常感谢。

TIA。

Answer 1

而不是使用ID（例如$("#selectable")），而不是使用类（例如$(".selectable")）

Answer 2

上面的代码适用于在单个页面上动态创建多个jQuery selectable。上述代码的问题是用于查找这些可选项的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; }

因为每个可选择的id都是＆＃34; selectable_x＆＃34;其中x是一个整数，样式已成功应用。

jQuery UI：动态地将多个可选项添加到ASP.NET Razor视图中

2 个答案: