Question

我有以下JS：

$(document).ready(function (e) {
    $(".pStyle").CapFirstWord();
});
function CapFirstWord() {
    $word = $(this);
    var k = $word.length;
    alert(k);
}

HTML：

<p class="pStyle">Of all of these "new" selectors, ::nth-letter is likely the most useful. For instance, Lettering.js wraps letters in for us so that we can select individual letters. This would be entirely unnecessary with ::nth-letter.</p>

我正在尝试创建一个回调函数，可以从其他页面调用它来显示给定类/ id的长度。

我怎样才能做到这一点。

Answer 1

如果您希望能够在jQuery选择器之后链接您的函数，您可以使用its $.fn.extend() method 扩展 jQuery的默认功能：

$.fn.extend({
    CapFirstWord: function() {
        $word = $(this);
        var k = $word.length;
        alert(k);
    }
});

jQuery.fn.extend()方法扩展了jQuery原型（$.fn）对象，以提供可以链接到jQuery()函数的新方法。

然后你可以拨打$(".pStyle").CapFirstWord();。

演示

$.fn.extend({
    CapFirstWord: function() {
        $word = $(this);
        var k = $word.length;
        alert(k);
    }
});

$(document).ready(function (e) {
    $(".pStyle").CapFirstWord();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="pStyle">Of all of these "new" selectors, ::nth-letter is likely the most useful. For instance, Lettering.js wraps letters in for us so that we can select individual letters. This would be entirely unnecessary with ::nth-letter.</p>

Answer 2

您正在调用该函数错误。您试图将常规函数链接到jquery对象。

$(document).ready(function (e) {
    CapFirstWord($(".pStyle"));
});

这里我添加了一个参数给函数，即上面脚本传递的元素：

function CapFirstWord($word) {

最后，为了得到字符串的长度，我在元素上调用.text()：

    var k = $word.text().length;

最终解决方案：

$(document).ready(function (e) {
    CapFirstWord($(".pStyle"));
});

function CapFirstWord($word) {
    var k = $word.text().length;
    alert(k);
}

Answer 3

jQuery对象没有一个名为CapFirstWord的函数，这就是它失败的原因。你应该调用该函数传递jQuery对象作为参数。像这样：

$(document).ready(function (e) {
       CapFirstWord($(".pStyle"));
});
function CapFirstWord(tag) {
    var k = tag.length;
    alert(k);
}

为什么js回调函数会给出错误

3 个答案:

演示

最终解决方案：