Question

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

这是元素的jsFiddle：http://jsfiddle.net/HeAyW/

正如你所看到的，它是一个非常容易的选择器。您可以单击数字以获得输入，您可以单击+和 - 按钮更改输入以及单击数字更改的背景。

但问题是当你按下+或 - 按钮时它不会改变范围的类，而输入中的数字确实会改变。我认为它与sibbling有关但我不能把手指放在它上面。

代码参考

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);
});

});

Answer 1

您永远不会将任何内容绑定到“添加”和“减去”链接。我打算这样做，然后有点被带走了。我取出了你的内联Javascript，并为添加和删除类创建了一个通用处理程序。您现在也可以输入一个数字来更改课程。

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

修改

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

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

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

Answer 2

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

Answer 3

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

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

以下是一种方法：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);
        });

    });

添加/删除类跨度最近

3 个答案: