Question

我正在尝试使用一个简单的JQuery函数，我输入一个类名（段落元素），输入最大高度，并在末尾用椭圆夹住段落的高度。（基本上使用this method）。但是，我收到错误：

Caught TypeError：toClamp.height不是函数

以下是我的代码。有什么想法吗？

function clamp(cl, height){
  var clamps = $(cl);
  for (var i = 0; i < clamps.length; i++) {
    var toClamp = clamps[i];
    while (toClamp.height() > height) {
        toClamp.text(function (index, text) {
            return text.replace(/\W*\s(\S)*$/, '...');
        });
    }
  }
}

$(window).load(function() {
  clamp('.clamp64', 64);
  clamp('.clamp106', 106)
})

Answer 1

这里的问题是您尝试在浏览器认为是jQuery对象的地方调用JavaScript函数。因此，为了使其正常工作，toClamp需要以某种方式告诉您的程序它是jQuery对象。

尝试：

$(toClamp).height();

您还会在调用.text()

的下一行代码中遇到同样的错误

将其更改为：

$(toClamp).text(...)

替代地

由于您使用的是jQuery，因此可以使用.each()函数来简化操作。

function clamp(cl, height){
  var clamps = $(cl);
  $(clamps).each(function(){
    while($(this).height() > height) {
      $(this).text(function (index, text){
            return text.replace(/\W*\s(\S)*$/, '...');
        });
    }
  });
}

此处this关键字取代toClamps

Answer 2

您正在DOM元素（.height()）上调用jQuery方法（clamps[i]）。这是问题所在。

有几种方法可以解决您的问题。

我的建议：使用.each + $(this)

访问当前元素的清洁循环

function clamp(cl, height){
  var clamps = $(cl);
  clamps.each(function () { // Iterate on jQuery objects
    var toClamp = $(this);  // Keep a reference of the current jQuery object
    while (toClamp.height() > height) {
        toClamp.text(function (index, text) {
            return text.replace(/\W*\s(\S)*$/, '...');
        });
    }
  });
}

与您的方法类似，使用.eq(index)代替[index]

function clamp(cl, height){
  var clamps = $(cl);
  for (var i = 0; i < clamps.length; i++) {
    var toClamp = clamps.eq(i); // get the n jQuery object
    while (toClamp.height() > height) {
        toClamp.text(function (index, text) {
            return text.replace(/\W*\s(\S)*$/, '...');
        });
    }
  }
}

另一个，但在我看来是多余的（由其他答案推荐）

function clamp(cl, height){
  var clamps = $(cl);
  for (var i = 0; i < clamps.length; i++) {
    var toClamp = clamps[i];
    while ($(toClamp).height() > height) { // convert (again) a DOM element into a jQuery object
        toClamp.text(function (index, text) {
            return text.replace(/\W*\s(\S)*$/, '...');
        });
    }
  }
}

Answer 3

尝试使用toClamp.height代替od toClamp.height()。 height实际上不是函数，而是元素的属性或属性。因此，无需使用()。

Answer 4

您是否尝试过：

var toClamp = $(clamps[i]);

您可能在非jQuery对象上运行jQuery函数。

Answer 5

我在工作，所以我现在不能进入这个阶段，但我相信你的错误来自于你在while循环中的逻辑。

这里：

while(toClamp.height() > height) ...

你是说toClamp有高度功能，但你还没有实现这个功能。

如果你不想拥有身高功能; - 你可以，但那取决于你; 是不是可以做像

这样的事情

这样：

function clamp(cl, h1){
var clamps = $(cl);
var height = $(h1);
for (var i = 0; i < clamps.length; i++) {
var toClamp = clamps[i];
while (toClamp.h1 > height) {
    toClamp.text(function (index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
     });
    }
  }
}

$(window).load(function() {
clamp('.clamp64', 64);
clamp('.clamp106', 106)`enter code here`
})

目前尚未对此进行测试，但是当我回到家时，我会进一步研究它。

JQuery：高度不是一个函数

5 个答案:

替代地