0

各パネルにチェックボックスがあるSpryアコーディオンメニューを作成しようとしています. このパネルは、多くの大学の単位に直接関係しています。そのチェックボックスがクリックされると、クリックされた他のチェックボックスの数とともに、ラベルのページの最後に合計が表示されます - Total Number of Transfer Credits.

これが私がこれまでに持っているサイトです（ライブ）：http://webfro.gs/south/toc/

このjsfiddleで、私が最終的にやろうとしていることを見ることができます... http://jsfiddle.net/jlnewnam/dC8T2/

HTMLは次のとおりです。

<div id="course_id">
    <input type="checkbox" value="3" />&nbsp; ASP100<br/>
    <input type="checkbox" value="4" />&nbsp; COM104<br/>
    <input type="checkbox" value="1" />&nbsp; ECO202<br/>
    <input type="checkbox" value="3" />&nbsp; MAT111<br/>
</div>
<br />
<br />
Total Potential Transfer Credits: <div id='total_potential'></div>

JavaScript は次のとおりです。 

jQuery(document).ready(function($) {
    var sum = 0;
    $('#course_id :checkbox').click(function() {
        sum = 0;
        $('#course_id :checkbox:checked').each(function(idx, elm) {
            sum += parseInt(elm.value, 10);
        });

        $('#total_potential').html(sum);

    });

});

各チェックボックスをクリックすると、クレジットの合計数が増加することがわかります。

私はSpryメニューでこれをやってのけることができないようです. 各パネルには独自の ID があり、目標を達成するために必要な分離が分からないためだと思います。

よろしく、

KT

4

2 に答える 2

1

コードは次のようになります。

jQuery(document).ready(function($) {
    $('#CourseMenu input[type=checkbox]').change(function() {
        var sum = 0;
        $('#CourseMenu input[type=checkbox]:checked').each(function(idx, elm) {
            if( $(elm).val() && !isNaN( parseInt( $(elm).val() ) ) ) {
                sum += parseInt( $(elm).val() );
            }
        });
        $('#total_potential').html(sum);
    });
}(jQuery));

まず、 に対して不適切なセレクターを選択しましたcheckbox。次に、changeイベントを使用することを好みます。それもうまくいくはずですが、論理的にはこの場合は適切clickだと思います。changeまた、別の読み方を追加しましたvalue（すでにjQueryが含まれているため）。

あなたのウェブサイトのJSコンソール（jsfiddleではない）に貼り付けてチェックしたので、テスト済みで動作します。

jsfiddle で動作するコード:

jQuery(document).ready(function($) {
    $('#course_id input[type=checkbox]').change(function() {
        var sum = 0;
        $('#course_id input[type=checkbox]:checked').each(function(idx, elm) {
            if( $(elm).val() && !isNaN( parseInt( $(elm).val() ) ) ) {
                sum += parseInt( $(elm).val() );
            }
        });
        $('#total_potential').html(sum);
    });
}(jQuery));

また、これがどのように機能するのかわかりません$('#CourseMenu :checkbox').Webidサイトのコンテナとjsfiddleのコンテナは異なります。#CourseMenujsfiddle に要素がありません...

次の行を jsfiddle に貼り付けることで、簡単に確認できます。

alert('Proper fiddle selector: ' + $('#course_id input[type=checkbox]').length);
alert('Wrong fiddle selector: ' + $('#CourseMenu :checkbox').length);

ご覧のとおり、2番目のセレクターはチェックボックスを返しません...

于 2013-05-15T23:51:53.203 に答える