シンプルな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：Javascriptを固定

<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> 

：

<!-- 
$(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(); 

}); 
//--> 

私はまた、代替の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検証エラーをチェックします。

おかげ SUnitは

Answer 3

OKので、この答えはあなたのコードにバグを修正されていませんが、私はもう少し一般的な、おそらくそれがベストプラクティスのいくつかを使用して検討し、より良い解決策を投稿したいと思います。

以下の例では、階層内の任意の数のレベルで動作し、複雑なシナリオを含めて、1人の子供のみを持つ親に特別な治療をしたいと考えていました。また、フォントAwesomeを使用してより良いグリフを取得します（特にブートストラップを使用している場合に便利です）。また、任意の要素に対してjqueryトグルを使用する代わりに、トグル状態を組み込んだcheckbox要素を使用することもできます。

まず、テーブルのマークアップから始めましょう。まず、あなたは置く+/-記号を、このような表のセルのいずれかで：/崩壊、このようなデータ - 属性でマークされなければならない拡大すべきである

<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クラスは次のようになります（私はLESSを使用していることに注意していますが、ない場合は、あなたが直接あなたのマークアップで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"); 
    } 
});