Question

我有一张桌子。每列顶部都有一个按钮。如果列中的下面的td元素包含内容，则隐藏按钮。如果没有，则显示按钮，然后单击添加类激活td元素。

$(document).ready(function (){
    $('.button-fill').on("click", function() { 
        var i=$(this).parent().index();

       if($(this).closest("tr").siblings().find("td:eq("+i+")").text()=="")
           $(this).hide();
       else
           $(this).show();    
    });

<!-- Fill in the td -->
    $('.button-fill').on("click", function() {
      var i=$(this).parent().index();
        $(this).closest("tr").siblings().find("td:eq("+i+")").addClass("active");
      //});
  });
});

http://jsfiddle.net/ujw0u6au/

我创造了一个jsfiddle。我不知道我做错了什么？谢谢

Answer 1

由于您在按钮单击中绑定了按钮切换逻辑 - 您将始终在启动时按下按钮。当您只点击按钮时，它将首先隐藏按钮，然后制作内容active。

如果您希望在页面加载后立即启动此行为，则应从代码中更改以下行（代码中的第2行） -

$('.button-fill').on("click", function() {

到

$('.button-fill').each( function(i,e) {

另外，你不应该在JavaScript中使用评论风格。

Answer 2

我可以看到你在同一个类上有两个“click”事件处理程序。而不是它，你也可以合并它。

以下是代码的优化版本：

JavaScript：

$(document).ready(function (){
    $('.button-fill').on("click", function() { //Only one click event handler
        var $this = $(this);
        var i=$this.parent().index();
        var $trSibling = $this.closest("tr").siblings();
        $this.toggle($trSibling.find("td:eq("+i+")").addClass("active").text() != ""); //adds the class as well and check the text as well.    
    })
    $(".button-fill").trigger("click"); 
    // explicitly clicking on button to make sure that initially button should not be shown if column text is not empty
});

JSFiddle链接：http://jsfiddle.net/ujw0u6au/1/

这和你想要的一样吗？

Answer 3

@Vijay有正确的答案，但作为旁注，你需要改变这个：

if($(this).closest("tr").siblings().find("td:eq("+i+")").text()=="")

到这个

if($(this).closest("tr").siblings().find("td:eq("+i+")").text()!="")

如果你想在有内容时隐藏按钮，而不是反过来（注意结尾附近的!=）。

如果表元素满足条件，则切换

3 个答案: