Question

这个问题是我提问的根本原因。

由于已经发布了两个答案，我想到了尝试不同的东西

使用Javascript：

$(function(){ 
    var thList = $('td');
    $('td').click(function(){
        for( i =0; i < thList.length;i++){
            // What to do here
        }
    });
});

HTML：

    <table border="2">
        <tr>
            <td> 1 </td>
            <td> 2 </td>
            <td> 3 </td>
        </tr>
    <table>

这里做的是将点击事件分配给<TH>元素。在加载时，我得到了数组中DOM中的所有<TH>。

现在，我的逻辑是。迭代for循环，如果点击的TH不是for loop中的那个，则隐藏它。

我尝试的是

if ( thList[i] != $(this)) { thList[i].style.display = 'none' }

但这似乎不起作用。我需要用什么代码来比较对象

Answer 1

当您访问jQuery对象中的项目时，您将它们作为DOM元素获取，而不是作为新的jQuery对象。因此，您应该直接将它与元素引用进行比较，而不是将元素引用包装在jQuery对象中：

for (i = 0; i < thList.length; i++) {
  if ( thList[i] != this) { thList[i].style.display = 'none' }
}

您还可以使用not method获取不带当前元素的集合：

thList.not(this).each(function(){ this.style.display = 'none'; });

当然，使用css method它变得更加简单：

thList.not(this).css('display', 'none');

注意事项：表格中的单元格实际上并不是单独的元素，您可以隐藏而不会影响表格中的其他单元格。当您在其中隐藏单元格时，该表可能会显示意外行为。

Answer 2

除了事实，您的示例标记不包含任何th - 元素，您可以尝试以下方法：

$('td').click(function(){

    var $tdList = $('td').not(this); // <- get all th's and exlude the clicked element

    $tdList.each(function(){this.style.display = 'none'; });
});

甚至更好，使用jQuery，然后你不需要每个包装器：

$tdList.hide();

由于jQuery为您节省了大量工作，因此请尽量使用它 - 使用each()代替for-loops并使用.css()（或更加专用的方法，如{{1} }）而不是原生.hide() - 这应该会显着缩短你的代码。

Answer 3

您可以使用：

thList.click(function() {
    thList.not(this).css("display", "none");
});

出于性能原因，您可以委派事件：

$("#yourtable").on("click", "th", function(event) {
    thList.not(event.target).css("display", "none");
});

我没有测试它，但应该有用。

然而我对UI很好奇：如果以这种方式隐藏TH，则在第一次点击它们之后它们就不能再显示了。

Answer 4

1-you $(this)与this不同，曾经是jquery对象 2 - 你没有TH元素这里的代码与你想要的代码相似但是有tds

$(function(){
var tdList = $('td');
$('td').click(function(){
    tdList.hide();
    $(this).show();
    //OR  tdList.not(this).hide();

  });
});

将“this”对象与DOM Array中的Object进行比较

4 个答案: