对象不支持此属性或方法

Question

我遇到了IE无法使用以下代码的问题。这段代码基本上隐藏了一个div，如果元素是空的，你会注意到它在除IE之外的所有地方都可以工作。

//hide webapp item if empty
if ($("#features").html().trim()) {} else {
    $("#f-h").hide()
}
if ($("#application").html().trim()) {} else {
    $("#a-h").hide()
}
if ($("#tech-specs").html().trim()) {} else {
    $("#t-h").hide()
}
if ($("#downloads").html().trim()) {} else {
    $("#d-h").hide()
}
if ($("#custom-field").html().trim()) {} else {
    $("#c-f").hide()
}

用于查看其实际效果的页面是webpage

如果有任何关于ie不喜欢这个或者更好的方法的线索，我们将不胜感激。

Answer 1

HTML方法只返回一个包含jQuery的字符串。

JavaScript字符串没有trim()方法。

如果您想要向javascript的String对象引入一个。您可以使用以下命令执行此操作：

String.prototype.trim = function () {
    return this.replace(/^\s*/, "").replace(/\s*$/, "");
}

^没有对此进行测试，但我非常确定它会完成这项工作。

Answer 2

我的猜测是，Internet Explorer正在以不同的方式解析这些行，从而导致错误。这个问题的解决方案是总是使用分号来标记行尾。我还清理了一些代码，用if-nots替换了空的if/else块。

//hide webapp item if empty

if (!$("#features").html().trim()) {
  $("#f-h").hide();
}

if (!$("#application").html().trim()) {
  $("#a-h").hide();
}

if (!$("#tech-specs").html().trim()) {
  $("#t-h").hide();
}

if (!$("#downloads").html().trim()) {
  $("#d-h").hide();
}

if (!$("#custom-field").html().trim()) {
  $("#c-f").hide();
}

Answer 3

根据JavaScript的结构，您可能会大大简化您的HTML。如果您想要隐藏的元素始终位于彼此附近/相邻的位置，您可以将类分配给部分("features“、"application”、"tech-specs“等)，例如"section"，以及您希望隐藏的元素("f-h”、"a-h“、"t-h”等)，例如" hide -me"，并使用单个函数来完成此工作：

$('.section').each(function() {
    if ($(this).is(':empty')) {
        $(this).closest('.hide-me').hide();
    }
});

我不一定喜欢这个解决方案，但您也可以使用要测试和隐藏的部分的映射，如果它们位于HTML中的随机位置：

var items = [
    { key: '#features', value: '#f-h' },
    { key: '#application', value: '#a-h' },
    { key: '#tech-specs', value: '#t-h' },
    { key: '#downloads', value: '#d-h' },
    { key: '#custom-field', value: '#c-h' }
];

$.each(items, function(index, element) {
    if ($(element.key).is(':empty')) {
        $(element.value).hide();
    }
});

以上代码的Here's a working example。

我知道这不能回答你的问题，但我只想拿出我的0.02美元。