0

我目前正在研究一个小的 jQuery 元素，在谷歌搜索和我的一些旧工作的帮助下，我相处得很好。但现在我碰到了一些东西，我有点卡住了。

这是元素的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/

编辑

我更新了每个索引都有一个属性“data-num”，jQuery 可以将其读取为索引的正值。

注意HTML和JS最后一行的变化

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

于 2012-08-07T01:38:30.857 回答
0

添加和减去“按钮”的事件处理程序是内联的，并且非常简单地仅增加（或减少）小时值框中的数字，没有代码可以更改相同相关数字的类（.spanval 元素）。在单击 + 和 - 按钮时添加一些代码，以根据需要添加/删除类。或者可能在小时值框中为更改事件添加一些代码，以将类添加到相关编号（如果还没有的话）

于 2012-08-07T01:07:46.893 回答
0

正如@OJay 提到的，您已将 onclick 事件声明为内联。将所有 JS 代码放在一起是个好主意。

基本上，您没有.spanval_active在 onclick 事件处理程序中更改加号和减号元素的类。

这是一种方法：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 回答