Question

我想做的事情（当然不起作用）是：

当用户更改行中输入的值时，那么单位价格和THAT行中的小计tds会将背景更改为橙色（该类为.basket-table td.hightlight）。

它还需要在特定时间内突出显示，之后bg需要变回淡蓝色。

你能帮帮我吗？非常感谢提前!!

Answer 1

$(function(){

    var delay = 2000;
    $(".basket-bsol .search-input").change(function(){

    var tr = $(this).closest("tr");

    tr.find(".price-enabled, .subtotal-price").addClass("hightlight");    

    setTimeout(function(){
          tr.find(".price-enabled, .subtotal-price").removeClass("hightlight");   
    }, delay); 

    });

});

Answer 2

我不是100％清楚你正在寻找什么，但这至少应该让你开始。它会找到包含类td和.subtotal-price的{{1}}元素（在您的示例中为橙色）：

.price-enabled

Answer 3

您可以结合使用setInterval计时器和oninput事件来确定这些字段的更改时间（如果oninput被触发，则可以清除setInterval）

此考试使用jQuery UI进行highlight effect

example

// traditional setInterval to check if input changed...
var isPriceChanged = function() {
        $('.search-input').each(function() {
            var $that = $(this),
                oldvalue = $that.data('oldvalue');

            // initialize oldvalue
            if (oldvalue === undefined) {
                $that.data('oldvalue', $that.val());
            } else {
                // update/highlight fields if value has changed
                if ($.trim($that.val()) !== $.trim(oldvalue)) {
                    highlightChangedFields($that);
                    $that.data('oldvalue', $that.val());
                }
            }
        });
    },
    // check input fields every half sec
    priceChangedTimer = setInterval(isPriceChanged, 500); 

// *new html5* 'input' event
$('.search-input').bind('input', function() {
    highlightChangedFields($(this));
    // disable traditional way if this event is called
    clearInterval(priceChangedTimer);
});

var timer = undefined,
    highlightChangedFields = function($that) {
        var $row = $that.closest('.basket-row')
            $price = $row.find('.price-enabled'),
            $subtotal = $row.find('.subtotal-price'),
            $fields = $.merge($price, $subtotal);

        // clear previous timers
        clearTimeout(timer);

        // update price values
        // probably use some kind of money formatter
        // such as: http://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript
        $price.text('£' + $that.val());
        $subtotal.text('£' + $that.val());

        // highlight price fields
        $fields.stop(true, true).effect('highlight', {color: '#ffbc0a'}, 2000);
    };

突出显示一个特定的TD

3 个答案: