简单的jQuery显示/隐藏表

Question

我有这个简单的jQuery函数来隐藏或显示表。显示/隐藏作品，但图像（加/减）不变。

该表是这样的：

 <span id="collapsible">These are some 
    new titles. 
    <table id="data"> 
    <tr> 
    <th colspan="3">2008</th> 
    </tr> 
    <tr> 
    <td>As You Like It</td> 
    <td>Comedy</td> 
    <td></td> 
    </tr> 
    <tr><th colspan="3">2007</th><tr> 
    <tr> 
    <td>Henry IV, Part I</td> 
    <td>History</td> 
    <td>1596</td> 
    </tr> 
    <tr> 
    <td>Sunit Joshi</td> 
    <td>History</td> 
    <td>2010</td> 
    </tr> 
</table> 

</span> 

jQuery函数是：

$(document).ready(function() { 
    var collapseIcon = 'images/minus.png'; 

var collapseText = 'Collapse this section'; 

var expandIcon = 'images/plus.png'; 

var expandText = 'Expand this section'; 

var $subHead = $('#collapsible'); 
$subHead.prepend('<img src="' + expandIcon + '" alt="' + expandText + '" class="clickable" />') 

$subHead.click(function(){ 
    $('#data').toggle(); 
    ($('#data').is(':hidden')) ? $(this).attr('src', expandIcon) : $(this).attr('src', collapseIcon); 
    return false; 
}); 

$subHead.css('cursor', 'pointer') 
    .click(); 

}）;

有什么想法这里可能是错的。图像保持初始的“+”状态。

谢谢

Answer 1

您的HTML在其中有几个验证错误。这可能会导致JavaScript中断或产生意想不到的结果。通过W3C Markup Validation Service运行HTML并修复这些错误。如果它仍然不能从那里使用有效的HTML编辑你的问题，我会进一步帮助。

---

OP已经回答了他的问题，但因为我在这里有我的代码会后我的为好。

有效的HTML：

<div id="collapsible">These are some new titles. 
    <table id="data"> 
     <tr> 
     <th colspan="3">2008</th> 
     </tr> 
     <tr> 
     <td>As You Like It</td> 
     <td>Comedy</td> 
     <td></td> 
     </tr> 
     <tr> 
     <th colspan="3">2007</th> 
     <td>Henry IV, Part I</td> 
     <td>Hist=ry</td> 
     <td>1596</td> 
     </tr> 
     <tr> 
     <td>Sunit Joshi</td> 
     <td>History</td> 
     <td>2010</td> 
     </tr> 
    </table> 
</div> 

固定的Javascript：

<!-- 
$(document).ready(function() { 
    var collapseIcon = 'images/minus.png'; 

    var collapseText = 'Collapse this section'; 

    var expandIcon = 'images/plus.png'; 

    var expandText = 'Expand this section'; 

    var $subHead = $('#collapsible'); 
    $subHead.prepend('<img src="' + expandIcon + '" alt="' + expandText + '" class="clickable" id="expandImage" />') 

    $subHead.click(function(){ 
     $('#data').toggle(); 
     ($('#data').is(':hidden')) ? $("#expandImage").attr('src', expandIcon).attr('alt', expandText) : $("#expandImage").attr('src', collapseIcon).attr('alt', collapseText); 
     console.log($(this).attr('src')); 
     return false; 
    }); 

    $subHead.css('cursor', 'pointer').click(); 

}); 
//--> 

我还加了ALT ATTR。因为我假设你也想这样。

Answer 2

我通过给图片标签赋予一个id来修复它。这里的更新：

...前面的代码

var $subHead = $('#collapsible'); 
$subHead.prepend('<img id="imgpointer" src="' + expandIcon + '" class="clickable" />') 

$subHead.click(function(){ 
    $('table#data').toggle(); 
    ($('table#data').is(':hidden')) 
     ? $('img#imgpointer').attr('src', expandIcon) 
     : $('img#imgpointer').attr('src', collapseIcon); 
    return false; 
}); 

...的代码休息。 我将检查MitMaro提到的HTML验证错误。

感谢 苏尼特

Answer 3

OK，所以这个答案是没有确定的bug在你的代码，但我想发布较笼统，并可能是一个更好的解决方案考虑它使用了一些最佳实践。

下面例子使用任意数量的层级和包括复杂的场景是你想给特殊处理母公司与只生一个孩子。它还使用Font Awesome来获得更好的字形（如果使用Bootstrap特别有用）。而不是在任意元素上使用jQuery切换，你可以使用内置切换状态的复选框元素。

那么让我们从你的表格标记开始。首先，你会把+/-符号表中的细胞像这样的一个：

<tr><td> 
    <input type="checkbox" id="parent1" class="txRowExpanderControl" checked> 
    <label class="txRowExpanderControlLabel" for="parent1"> 
     <i class="rowsExpandIcon"></i>&nbsp; 
    </label>{{title}} 
</td></tr> 

应该被压扁/可扩展的应标有这样的数据 - 属性的行。

<tr data-expanderid="parent1">...</tr> 
<tr data-expanderid="parent1">...</tr> 

接下来，您的相关CSS类应该是这样的（请注意，我使用的较少，但如果你没有，那么你可以直接嵌入在你的标记FA *类）：

.txRowExpanderControl { 
    display:none; //don't show checkbox 
} 
.txRowExpanderControlLabel { 
    cursor: pointer; //cursor same as link 
} 

.rowsExpandIcon:extend(.fa all):extend(.fa-plus-square-o all) { 
} 
.rowsCollapseIcon:extend(.fa all):extend(.fa-minus-square-o all) { 
} 

.txRowVisible { 
    display:table-row; 
} 
.txRowCollapsed { 
    display:none; 
} 

最后，你的JavaScript看起来像这样。请注意，我使用比直接绑定更好的委托事件，而不是使用jQuery切换，我使用明确的开/关，因此事情很容易调试。

$("#myTable").delegate(".txRowExpanderControl", "click", function() { 
    var currentState = $(this).prop("checked"); 
    var expanderId = $(this).attr("id"); 
    var childRows = $(this).closest("tr").nextAll("tr[data-expanderid=\"" + expanderId + "\"]"); 
    var expanderIcon = $(this).next("label[for=\"" + expanderId + "\"]").children("i"); 

    if (currentState) { 
     childRows.attr("class", "txRowCollapsed"); 
     expanderIcon.attr("class", "rowsExpandIcon"); 
    } 
    else { 
     childRows.attr("class", "txRowVisible"); 
     expanderIcon.attr("class", "rowsCollapseIcon"); 
    } 
});