簡單的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"); 
    } 
});