Question

问题

所以，我的问题是我的<input type="range">会在更改时返回undefined。在changeCheck()中，我正在检查哪个<input type="range">已更改。在我的addBrightness()中，我正在输出<input type="range">的值，只要它被更改。

的JavaScript

// VARIABLES
var canvas = $('#editor')[0];
var ctx = canvas.getContext('2d');

var img = new Image();
img.crossOrigin = '';
img.src = '';

var file = $('.file');
var open = $('.open');
var fileOpen = $('.file-open');

var control = $("input[type=range]");
var brightness = $('.brightness');

// MAIN
$(document).ready(function() {
    $(img).on('load', imgLoad);
    $(file).on('click', dropdown);
    $(open).on('click', openFile);
    $(fileOpen).on('change', getPath);

    $(control).on('change', checkChange);
})

// CHECK CHANGE
function checkChange() {
    if($(this).parent().hasClass('brightness')) {
        addBrightness();
    }
}

// ADD BRIGHTNESS
function addBrightness(val) {
    var value = $('brightness').val();

    console.log(value);

    /*Caman('#editor', function () {
        this.brightness(value);
        this.render();
    });*/
}

// DROPDOWN
function dropdown() {
    $(this).children('ul').slideToggle();
}

// OPEN FILE
function openFile() {
    $(fileOpen).click();
}

// GET FILE PATH
function getPath(e) {
    img.src = URL.createObjectURL(e.target.files[0]);

    ctx.imageSmoothingEnabled = false;
    imgLoad();
}

// LOAD IMG
function imgLoad() {
    if(img.width > 800) {
        img.width = 800;

        if(img.height > 800) {
            img.height = 800;

            canvas.width = img.width;
            canvas.height = img.height;

            ctx.drawImage(img, 0, 0, img.width, img.height);
        }
    }
}

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- STYLESHEETS -->
    <link rel="stylesheet" type="text/css" href="assets/css/large.css" media="(min-width:800px)">

    <!-- FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">

    <!-- FAVICON -->
</head>
<body>
    <nav>
        <ul>
            <li class="file"><i class="fa fa-file-o" aria-hidden="true"></i> File
                <ul>
                    <li class="open"><i class="fa fa-folder-open-o" aria-hidden="true"></i> Open</li>
                    <li class="save"><i class="fa fa-floppy-o" aria-hidden="true"></i> Save</li>
                    <li class="exit"><i class="fa fa-sign-out" aria-hidden="true"></i> Exit</li>
                </ul>
            </li>
        </ul>
    </nav>

    <div class="container">

        <center>
            <canvas id="editor"></canvas>
        </center>

        <div class="controls-container">

            <!-- brightness -->
            <div class="brightness control">
                <h3>Brightness</h3>
                <input type="range"  value="50" min="0" max="100">
            </div>

            <!-- contrest -->
            <div class="contrast control">
                <h3>Contrast</h3>
                <input type="range"  value="50" min="0" max="100">
            </div>

            <!-- exposure -->
            <div class="exposure control">
                <h3>Exposure</h3>
                <input type="range"  value="50" min="0" max="100">
            </div>

            <!-- sharpen -->
            <div class="sharpen control">
                <h3>Sharpen</h3>
                <input type="range"  value="0" min="0" max="100">
            </div>

        </div>

    </div>

    <input type="file" class="file-open">

    <!-- SCRIPTS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/camanjs/4.0.0/caman.full.min.js"></script>
    <script src="https://use.fontawesome.com/e99695fe86.js"></script>
    <script src="assets/js/main.js"></script>
</body>
</html>

Answer 1

您没有正确选择input亮度。

var value = $('.brightness>input[type="range"]:first').val();

会奏效。

Answer 2

执行此操作时：

var value = $('brightness').val();

...您没有在页面上选择任何内容。这将选择班级：

var value = $('.brightness').val();

...但即使这样也会失败，因为它是你想要的类中的输入：

var value = $('.brightness input').val();

另外，一般来说我相信jQuery会返回一个数组，因为你没有按id选择，所以你可能想做这样的事情（未经测试）：

var value = $('.brightness input')[0].val();

如果这不是您的首选方式，请在输入中添加ID，然后您可以使用：

var value = $('#brightness-input').val();

输入范围返回undefined

2 个答案: