0

私は現在、小さな jQuery 要素に取り組んでおり、Google 検索と以前の作業のいくつかの助けを借りて、うまくやっています。しかし、今私は何かにぶつかり、少し立ち往生しています。

要素の jsFiddle は次のとおりです: http://jsfiddle.net/HeAyW/

ご覧のとおり、非常に簡単なセレクターです。数字をクリックして入力を取得し、+ および - ボタンをクリックして入力を変更し、数字をクリックすると背景が変わります。

しかし、問題は、+ または - ボタンを押しても、スパンのクラスは変更されませんが、入力の数値は変更されることです。兄弟と関係があると思いますが、指を置くことはできません。

コード参照

jQuery(document).ready(function() {

$('.spanval').click(function(){
    $('#hourvalue').val($(this).text());
});

    $('.spanval').click(function(){
        $('.spanval_active').removeClass('spanval_active');
         $(this).addClass('spanval_active');
    });

jQuery('.hour_dropdown').hide()

jQuery('.more').click(function() {
    $('.hour_dropdown').fadeToggle(200);
});

});
4

3 に答える 3

1

Add リンクと Subtract リンクには何もバインドしていません。私はまさにそれをするつもりでしたが、ちょっと夢中になりました。インライン Javascript を取り出し、クラスの追加と削除のためのユニバーサル ハンドラーを作成しました。数字を入力してクラスを変更することもできるようになりました。

http://jsfiddle.net/HeAyW/3/

編集

各インデックスがインデックスの正の値として jQuery で読み取れる属性「data-num」を持つように更新しました。

HTML と JS の最後の行の変更に注目してください。

http://jsfiddle.net/HeAyW/4/

于 2012-08-07T01:38:30.857 に答える
0

加算および減算の「ボタン」のイベント ハンドラーはインラインであり、hourvalue ボックスの数値を単純にインクリメント (またはデクリメント) するだけです。同じ関連する数値 (.spanval 要素) のクラスを変更するコードはありません。+ および - ボタンのクリック時にコードを追加して、必要に応じてクラスを追加/削除します。または、時間値ボックスに変更イベントのコードを追加して、クラスを関連する番号にまだ追加していない場合は追加する可能性があります

于 2012-08-07T01:07:46.893 に答える
0

@OJayが述べたように、onclickイベントがインラインで宣言されています。すべての JS コードをまとめておくことをお勧めします。

基本的.spanval_activeに、プラス要素とマイナス要素の onclick イベント ハンドラーでクラスを変更していませんでした。

ここに1つのアプローチがあります：http://jsfiddle.net/PcWjA/2/

jQuery(document).ready(function() {
        // You can set this to a default hour and then call update_hour()
        var hour = 0;

        $('.spanval').click(function() {
            hour = $(this).text();
        });

        $('.subtract').click(function() {
            hour--;
        });

        $('.add').click(function() {
            hour++;
        });

        $('.spanval, .subtract, .add').click(function() {
            update_hour();
        });

        function update_hour()
        {
            $('.spanval_active').removeClass('spanval_active');

            $('.spanval').eq( hour - 1 ).addClass('spanval_active');

            $('#hourvalue').val( hour );
        }

        //update_hour();

        jQuery('.hour_dropdown').hide()

        jQuery('.more').click(function() {
            $('.hour_dropdown').fadeToggle(200);
        });

    });​
于 2012-08-07T01:42:03.703 に答える