0

目标：如果自定义元素类型（例如<media ...>）具有多个src文件扩展名之一（例如m4v，jpg...），请更改自定义元素类型以反映正确显示的元素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 noConflict 模式下运行的

4

1 回答 1

0

尝试以下操作：

编辑

我对元素和图像标签的输出进行了微调。它正在输出<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 进行测试。

该插件也有一个小调整，只是检查该元素是否存在，如果不存在则不做任何事情。如果该检查不存在，它会向您大喊大叫，因为它会尝试获取未定义元素的属性。

于 2013-05-25T19:35:22.893 回答