用输入文字更改按钮的边框半径

Question

我有一些问题，我不知道为什么。 我尝试使用输入文本更改按钮的边框半径，但是当我单击提交按钮时它不起作用。 我有这样的：

$(document).ready(function(){ 
 
\t $("#submitBorderRadius").click(function(){ 
 
\t \t var x = $("#borderradiusSelect").val(); 
 
\t \t $("#testButton").css("borderRadius", x) 
 
    }); 
 
});

<button id="testButton">Test</button> 
 

 

 
<form> 
 
Border Radius : <input type="text" id="borderradiusSelect" value="0px"><br> 
 
<button id="submitBorderRadius">Submit</button> 
 
</form>

有人知道是什么问题？

Answer 1

点击“提交”按钮后，页面重新加载，所以您永远不会有机会看到应用于“测试”按钮的边框半径值。

您可以通过使用jQuery的preventDefault()方法停止点击重新加载页面。

我已经更新了你的代码以行动表达这一点：

$(document).ready(function(){ 
 
    $("#submitBorderRadius").click(function(e){ 
 
    e.preventDefault(); 
 
    var x = $("#borderradiusSelect").val(); 
 
    $("#testButton").css("borderRadius", x) 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="testButton">Test</button> 
 

 

 
<form> 
 
Border Radius : <input type="text" id="borderradiusSelect" value="0px"><br> 
 
<button id="submitBorderRadius">Submit</button> 
 
</form>