jquery - 输入改变边界半径+建议

Question

简而言之:我有一张图片，为其设置了 border-radius，得到了一个输入类型编号，它应该更改 keyup 上的 border-top-left(还建议是否有比 keyup 更好的方法)。但是代码由于某种原因不起作用。我试过调试，它似乎正确地获取了值，尝试设置特定的 border-top-left-radius，比如 35px，它也能正常工作，但是当我将它设置为“x”的值时，它不起作用。这是一个 JS fiddle :https://jsfiddle.net/fwsd8td1/ - 由于某种原因，JSfiddle 中的 jquery 不起作用。

代码如下:

HTML:

<main>
        <div id="gallery">
        <img src="http://thumbnails.cbc.ca/maven_legacy/thumbnails/822/983/raw-obama-prince-george-050116.jpg" alt="" id="pic" />

<input type="number" name="TLR" min="0" max="50" " />
        </div>
</main>

CSS:

main div#gallery > img {
    width: 200px;
    height: 300px;
}

#pic {
    border-radius: 250px;
}

j查询:

$("input[name='TLR']").on('keyup', function() {
    var x = $("input[name='TLR']").val();
    $("#snimka").css('border-top-left-radius',x);

    console.log(x); /* debug */
});

请注意，x 应默认为“px”

Answer 1

方法 1:在 keyup 事件中使用 Javascript

    $("input[name='TLR']").on('keyup', function() {

    var x= $("input[name='TLR']").val();

    //$("#pic").css('border-top-left-radius',x);
 document.getElementById("pic").style.borderTopLeftRadius  = x+'px';

});

单击此处获取 Live Demo

方法二:使用Jquery

$("input[name='TLR']").on('keyup', function() {

        var x= $("input[name='TLR']").val();

         $('#pic').css('border-top-left-radius', x+'px');

    });

单击此处获取 Live Demo