更改CSS如果輸入值有specfic文本（使用加減按鈕）

Question

我有輸入框與加號和減號按鈕
我想是顯示div pete (display: block)如果輸入框中輸入值增至50
我試着用KEYUP但它只適用於手動放置50值而不使用加減按鈕（在我的情況下，我禁用了輸入）。

JS FIDDLE

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<p id="pete" style="display:none;">Pete</p> 
<div class="sp-quantity"> 

    <div class="sp-minus fff"> <a class="ddd" href="#">-</a> 
    </div> 
    <div class="sp-input"> 
    <input type="text" class="quntity-input" value="52" disabled /> 
    </div> 
    <div class="sp-plus fff"> <a class="ddd" href="#">+</a> 
    </div> 
</div> 

jQuery的：

$(".ddd").on("click", function() { 
    var $button = $(this); 
    var oldValue = $button.closest('.sp-quantity').find("input.quntity-input").val(); 

    if ($button.text() == "+") { 
    var newVal = parseFloat(oldValue) + 1; 
    } else { 
    // Don't allow decrementing below zero 
    if (oldValue > 0) { 
     var newVal = parseFloat(oldValue) - 1; 
    } else { 
     newVal = 0; 
    } 
    } 

    $button.closest('.sp-quantity').find("input.quntity-input").val(newVal); 

}); 
$(".quntity-input").keyup(function() { 
    if (this.value == "50") { 
    $("#pete").css("display", "block"); 
    } else { 
    $("#pete").css("display", "none"); 
    } 
}); 

CSS：

.sp-quantity { 
    width: 124px; 
    height: 42px; 
    font-family: "ProximaNova Bold", Helvetica, Arial; 
} 

.sp-minus { 
    width: 40px; 
    height: 40px; 
    border: 1px solid #e1e1e1; 
    float: left; 
    text-align: center; 
} 

.sp-input { 
    width: 40px; 
    height: 40px; 
    border: 1px solid #e1e1e1; 
    border-left: 0px solid black; 
    float: left; 
} 

.sp-plus { 
    width: 40px; 
    height: 40px; 
    border: 1px solid #e1e1e1; 
    border-left: 0px solid #e1e1e1; 
    float: left; 
    text-align: center; 
} 

.sp-input input { 
    width: 30px; 
    height: 34px; 
    text-align: center; 
    font-family: "ProximaNova Bold", Helvetica, Arial; 
    border: none; 
} 

.sp-input input:focus { 
    border: 1px solid #e1e1e1; 
    border: none; 
} 

.sp-minus a, 
.sp-plus a { 
    display: block; 
    width: 100%; 
    height: 100%; 
    padding-top: 5px; 
} 

Answer 1

了一些調整，你就在那裏。我認爲這最好通過您輸入的自定義事件來實現。看我的fiddle。

var $button = $(this); 
var inputControl = $button.closest('.sp-quantity').find("input.quntity-input"); 
var oldValue = inputControl.val(); 

if ($button.text() == "+") { 
    var newVal = parseFloat(oldValue) + 1; 
} else { 
    // Don't allow decrementing below zero 
    if (oldValue > 0) { 
     var newVal = parseFloat(oldValue) - 1; 
    } else { 
     newVal = 0; 
    } 
} 

if (newVal != oldValue) { 
    inputControl.val(newVal); 
    inputControl.trigger('value-updated'); 
} 


}); 

$(".ddd").closest('.sp-quantity').find("input.quntity-input").on('value-updated', function() { 
    if ($(this).val() == "50") { 
    $('p#pete').show(); 
    } else { 
    $('p#pete').hide(); 
    } 
}); 

$(".quntity-input").keyup(function() { 
    if (this.value == "50") { 
     $("#pete").css("display", "block"); 
    } 
    else { 
     $("#pete").css("display", "none"); 
    } 
});