Question

我正在尝试创建一个jQuery插件，以在目标元素之后输出一些示例文本。

我的代码是这样的

jQuery功能

(function($){
    $.fn.getVideo = function(){        
        return this.each(function() {

            $(this).wrapAll('<div class="wrap-getvideo" />')
            $wrapGetvideo = $(this).closest('.wrap-getvideo');
            $wrapGetvideo.append('<div class="title"></div>');

            $(this).on('keyup', function(){
                $wrapGetvideo.find('.title').html('Testing');
            });
        });
    }
}(jQuery));

调用函数

$(document).ready(function(){
   $('.getvideo').getVideo();
});

HTML

<input class="getvideo" type="text" placeholder="Enter video URL">

<input class="getvideo" type="text" placeholder="Enter video URL">

<input class="getvideo" type="text" placeholder="Enter video URL">

小提琴 http://jsfiddle.net/8pbpm547/

正如你可以看到上面的HTML，我已经使用了插件3输入框，每个输入框都应该在keyup时输出旁边的示例文本'Testing'。但只有最后一个显示。

我的代码有什么问题，如何在所有3个项目上输出文本。

Answer 1

您正在jquery中使用$wrapGetvideo更新$(this).closest('.wrap-getvideo')（全局变量），最后$wrapGetvideo将包含您的最后一个元素引用。请尝试：

 $(this).on('keyup', function(){
   $(this).closest('.wrap-getvideo').find('.title').html('Testing');
 });

而不是

$(this).on('keyup', function(){
      $wrapGetvideo.find('.title').html('Testing');
});

<强> DEMO

Answer 2

您错过了var语句，现在$wrapGetvideo是全局的，并且在每次迭代时都会被覆盖，这就是为什么它只适用于最后一次

(function($){
    $.fn.getVideo = function(){        
        return this.each(function() {

            $(this).wrapAll('<div class="wrap-getvideo" />')
            var $wrapGetvideo = $(this).closest('.wrap-getvideo');
            $wrapGetvideo.append('<div class="title"></div>');

            $(this).on('keyup', function(){
                $wrapGetvideo.find('.title').html('Testing');
            });
        });
    }
}(jQuery));

FIDDLE

每个jQuery函数都无法正常工作

2 个答案: