Question

此功能（使用选项：已选中）将CSS和HTML更改为0以模拟某种进度条应用。问题是它超过了100％。因此返回“newWidth”时if语句不正确，或者其他错误？任何线索都会受到高度赞赏吗？

$(function(){
$('#selectChoice').change(function() {
    $('option:selected', this).each(function() {
        var id = $('#selectChoice option:selected').attr('id');
        $('#' + id + 'Item').css("color", "#f00").css("font-weight", "bold");
    });
});

$('#plus25').on('click', function() {
    var id = $('#selectChoice option:selected').attr('id');
    $('#' + id + 'Item').html(function(i, value) {
        var newWidth = parseInt(value * 1 + 25);
        var e = window.event;
        $('#' + id + 'Item').css('width', newWidth + '%');
        if (value <= 75){
            return newWidth;
        } else { 
            e.PreventDefault();}
        });
    });
});

可以看到完整版here

Answer 1

如果您正在尝试阻止冒泡点击事件，请将点击事件传递给html()功能; preventDefault() 是camelcase。

$('#plus25').on('click', function(e) {
    var id = $('#selectChoice option:selected').attr('id');
    var idItem = $('#' + id + 'Item');
    idItem.html(function(i, value) {
        var newWidth = +value + 25;
        idItem.css('width', newWidth + '%');
        if (newWidth < 76){
            return newWidth;
        } else { 
            e.preventDefault();
            return "";
        }
    });
});

Answer 2

$('#plus25').on('click', function(e) {
    var id = $('#selectChoice option:selected').attr('id'),
        $target = $('#'+ id +'Item');

    $target.html(function(i, value) {
        var currentWidth = parseInt(value, 10),
            newWidth = currentWidth + 25;

        //check if the operation is valid first
        if (newWidth <= 100) {
            $target.css('width', newWidth +'%');
        } else {
            //update would have pushed it beyond 100.
            //keep the original value
            //don't change the css
            newWidth = currentWidth;
        }

        return newWidth;
    });
});

e.preventDefault（）对if / else条件不起作用100％

2 个答案: