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 スタイルは適用されていません。

アイデアは大歓迎です。

ティア。

4

2 に答える 2

0

上記のコードは、1つのページに複数の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には「selectable_x」のIDが与えられ、xは整数であるため、スタイリングは正常に適用されました。

于 2012-02-26T05:30:23.950 に答える
0

IDを使用する代わりに (例 ) $("#selectable")、代わりにクラスを使用できますか (例$(".selectable"))

于 2012-02-25T14:28:42.353 に答える