web-dev-qa-db-ja.com

.css（）は関数ではありません[jQuery]？

次のカスタムタグ/ディレクティブがあります。

_<tile class="ng-scope gridster-item" tilevalue="1" gridster-item="tile" row="0" col = "0" ng-repeat="tile in selectedTiles"> </tile>
_

キーボードイベント_selectedTiles array_ごとに_(shift + right arrow)_の各タイル（「タイル」ディレクティブ）にフォーカスすることを目的とするキーボードコントロールを作成しました。

_// Keyboard Tile Navigation

        //Starting pos
        var curIndex = -1

        //keyboard control
        $(document).keydown(function(event) {

        if (event.shiftKey && event.which === 39) {
                console.log("right");
                focusNext();
                }
           });

        function focusNext() {
            focusTile(+1);
        }

        function focusTile(delta) {

            var visibleTiles = $scope.selectedTiles;
            var elem = $("[gridster-item='tile']");

            curIndex = curIndex + delta;
            el = elem[curIndex];

        el.attr('tabindex', -1).focus();    
        el.css("border-color", "yellow");

        }
_

変数elemのコンソールログを取得すると、DOMに表示されるタイルの配列を取得します（予想どおり）。問題は、.attr()関数または.css()関数を追加しようとすると、これらが関数でないことを示すエラーが表示されます。どうすれば調整できますか？

javascriptjqueryhtmlangularjs
8
KO12

Elem [curIndex]の代わりに$（elem [curIndex]）を使用して、これを試してください：

.css（）はjqueryのメソッドであり、そのメソッドを使用したい場合は、

だからそれは：

$(elem[curIndex]).css("border-color", "yellow");

JavaScriptを使用して要素にスタイルを追加する場合は、次のようにしてみてください。

（単なる例）

var myElement = document.querySelector("#superman");
myElement.style.backgroundColor = "#D93600";
18
Dhara Parmar

Like elem[curIndex]を使用すると、elem（jQueryラッパー）がjavascriptオブジェクトになります。つまり、コアJavaScriptメソッドではなくjqueryであるため、このようなエラーが発生します。

したがって、jqueryで再度ラップする必要があります。

$(elem[curIndex])//now using .css() or .attr() will not throw you errors.
2
Bhojendra Rauniyar