Question

缩短：我有一张图片，设置border-radius，得到一个输入类型编号，这应该改变keyup上的border-left-left（也建议是否有比keyup更好的方法）。但是代码由于某种原因不起作用。我已经尝试过调试了，它似乎正确地取得了价值，尝试设置特定的border-top-left-radius就像35px一样，并且它也能正常工作，但是当我将它设置为＆＃34; x＆＃34的值时;这是行不通的。这是一个JS小提琴：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;
}

jquery的：

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

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

注意x应该得到＆＃34; px＆＃34;默认

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

方法2：使用Jquery

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

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

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

    });

点击此处查看Live Demo

输入更改边框半径+建议

1 个答案: