Javascript 输入范围返回未定义的值_Javascript_Undefined

Javascript 输入范围返回未定义的值

javascript

Javascript 输入范围返回未定义的值,javascript,undefined,Javascript,Undefined,问题所以，我的问题是，我的在更改时返回未定义的。在changeCheck（）中，我正在检查哪个被更改。在我的addBrightness（）中，我正在输出的值，当它被更改时 JavaScript // VARIABLES var canvas = $('#editor')[0]; var ctx = canvas.getContext('2d'); var img = new Image(); img.crossOrigin = ''; img.src = ''; var file = $(

问题

所以，我的问题是，我的

在更改时返回

未定义的。在changeCheck（）
中，我正在检查哪个
被更改。在我的addBrightness（）
中，我正在输出
的值，当它被更改时
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>



文件

打开
保存
退出



亮度
对比度
面临
锐化
您没有正确选择亮度的输入
var value = $('.brightness>input[type="range"]:first').val();

将起作用。
执行此操作时：
var value = $('brightness').val();

…您没有在页面上选择任何内容。这将选择类：
var value = $('.brightness').val();

…但即使这样也会失败，因为您需要的是类内部的输入：
var value = $('.brightness input').val();

另外，我通常认为jQuery将返回一个数组，因为您没有按id进行选择，所以您可能希望执行以下操作（未测试）：
如果这不是您的首选方式，请在输入中添加id，然后您可以使用：
var value = $('#brightness-input').val();

请注意，这可能会返回一个数组，因为您将使用具有亮度类的父级选择所有输入。这不一定是个问题，但如果您为页面上的其他内容添加了另一个亮度范围选择器，则可能会将您忽略。酷。：）我相信“第一个孩子”是你想要的。我使用了：first
仅选择第一次出现<代码>：第一个孩子
可以选择每个家长的所有第一个孩子<代码>：第一个选择器将只选择一个元素。哦，我现在明白了。“：“first”实际上是一个jQuery扩展，只能与jQuery一起使用，这正是他所使用的。这就是为什么很难找到它。以下是相关文档：确保不要在CSS中使用它！
var value = $('#brightness-input').val();