Show() 函数在值达到 100% 时未激活答案

【问题标题】：Show() Function Not Activating When Value Reaches 100%Show() 函数在值达到 100% 时未激活
【发布时间】：2014-10-09 16:10:52
【问题描述】：

所以我试图在进度条达到 100% 时显示提交按钮。 The value of the progress bar increases when each of two drop-downs are selected, and subsequent check-boxes are chosen.这是栏和按钮的 div：

<div id="submitContainer" align="center">

<br />
<progress id="progressBar" value="0" max="100"><div class="progressbar"></div></progress>
<br />
<input id="submitButton" type="button" value="Check Trade" onclick="function()" />    
</div>

这是增加进度条值的脚本：

var doneA = false;
    $('#teamASelect').on('change', function() {
        if (!doneA) {
        $("#progressBar").attr('value', $("#progressBar").prop('value')+25);
        doneA = true;
    }
}); 

var doneB = false;
    $('#teamBSelect').on('change', function() {
        if (!doneB) {
        $("#progressBar").attr('value', $("#progressBar").prop('value')+25);
        doneB = true;
    }
});

var doneC = false;
    $('.checkA').on('change', function() {
        if (!doneC) {
        $("#progressBar").attr('value', $("#progressBar").prop('value')+25);
        doneC = true;
    }
});

var doneD = false;
    $('.checkB').on('change', function() {
        if (!doneD) {
        $("#progressBar").attr('value', $("#progressBar").prop('value')+25);
        doneC = true;
    }
}); 

var progress = $("#progressBar").attr('value');

这是应该显示提交按钮的脚本......或者我认为：

$(document).ready(function () {
$('#submitButton').hide();
});

$('#progressBar').prop('value').on('change', function () {
    if (progress > 99) {
    $('#submitButton').show();
    }
});

我做错了什么？任何帮助是极大的赞赏。谢谢大家！

【问题讨论】：

.value 属性通常是字符串，而不是数字……您是否查看过您实际获得的值？
我设置了一个警报来显示进度条的值正在发生变化。当我加载页面时，它会弹出一个 0，但在选择下拉列表或选中一个框时没有任何反应，所以我猜问题必须与我如何设置我的更改功能有关。不过，这似乎很奇怪，因为当我选择下拉菜单和复选框时，进度条会在视觉上做出反应。

标签： javascript jquery function if-statement show-hide

【解决方案1】：

你的 jQuery 代码是错误的

$('#progressBar').prop('value').on('change', function () {

.prop(xxx) 将返回该属性的值。

你需要删除 .prop()

$('#progressBar').on('change', function () {

现在 if (progress > 99) { 中的 progress 是什么？您不应该阅读价值吗？

if (this.value > 99) {

$('#progressBar').on('change', function () {
    if (this.value > 99) {
    $('#submitButton').show();
    }
});

并且在JS中设置值不会触发更改，因此您需要触发它

$("#progressBar").attr('value', $("#progressBar").prop('value')+25).trigger("change");

【讨论】：

去掉了 .prop('value')，但这并不能解决问题。而progress是一个应该包含进度条值的变量： var progress = $("#progressBar").attr('value');
啊，设置值不会触发变化，需要触发。