0

目標: カスタム要素タイプ (例: <media ...>) にいくつかのsrcファイル拡張子 (例: m4v、jpg...) の 1 つがある場合、カスタム要素タイプを変更して適切な要素を反映し、適切に表示しsrcます。

media要素のjqueryセレクターが問題になる可能性があると思いますか?

jQuery(function($){
    $(document).ready(function($) {
    $.fn.changeElementType = function(newType) {
        var attrs = {};

        $.each(this[0].attributes, function(idx, attr) {
            attrs[attr.nodeName] = attr.nodeValue;
        });

        this.replaceWith(function() {
            return $("<" + newType + "/>", attrs).append($(this).contents());
        });
    }
    })(jQuery);


    $("media").has('[src$=".jpg"]').changeElementType("img");
    $("media").has('[src$=".m4v"]').changeElementType("video");
});

これまでのところ、これを実行するとChromeコンソールはjQueryエラーを報告します...しかし、私が知る限り、すべてが適切に宣言されています。何かの構文または誤解？

編集：ここにエラーレポートがあります

Uncaught TypeError: object is not a function
(anonymous function)
l jquery.min.js:2
c.add jquery.min.js:2
v.fn.v.ready jquery.min.js:2
v.fn.v.init jquery.min.js:2
v jquery.min.js:2
(anonymous function)
(anonymous function) jquery.min.js:2
v.extend.globalEval jquery.min.js:2
(anonymous function) jquery.min.js:2
v.extend.each jquery.min.js:2
v.fn.extend.domManip jquery.min.js:2
v.fn.extend.append jquery.min.js:2
(anonymous function) jquery.min.js:2
v.extend.access jquery.min.js:2
v.fn.extend.html jquery.min.js:2
(anonymous function) jquery.min.js:2
l jquery.min.js:2
c.fireWith jquery.min.js:2
T jquery.min.js:2
r

• これは、Wordpress の非競合モードで実行されています

4

1 に答える 1

0

次のことを試してください。

編集

element タグと image タグの出力を微調整しました。<img></img>無効な出力をしていました。更新されたフィドルを参照してください

http://jsfiddle.net/denniswaltermartinez/TjGzZ/

http://jsfiddle.net/denniswaltermartinez/TjGzZ/3/

ほんの少しの微調整。

jQuery(function ($) {

    $.fn.changeElementType = function (newType) {

        if (!this.length) return;    // added

        var attrs = {};

        $.each(this[0].attributes, function (idx, attr) {
            attrs[attr.name] = attr.value;
        });

        this.replaceWith(function () {

            var element = $('<' + newType + '/>', attrs);

            if (newType !== 'img')
                element.append($(this).contents());

            return element;
        });
    };

    $('media[src$=".png"]').changeElementType('img');    // changed slightly
    $('media[src$=".m4v"]').changeElementType('video');    // changed slightly
});

むしろその後

$("media").has('[src$=".jpg"]').changeElementType("img");

に変更されました

$('media[src$=".png"]').changeElementType('img');

もちろん、必要に応じて変更でき.pngます。テスト用に png を使用しました。

プラグインにも小さな調整が 1 つあります。その要素が存在するかどうかを確認するだけで、存在しない場合は何もしません。そのチェックがなければ、未定義の要素の属性を取得しようとするため、怒鳴られます。

于 2013-05-25T19:35:22.893 に答える