Question

我正忙着编写一个表单，该表单使用单选按钮为网页上的H2标签选择新的字体颜色和边框。我已经粘贴了下面的代码 - 任何提示？

谢谢！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form >
<label>Green<input type="radio" name="rec" value="green"></label>

<label>Blue<input type="radio" name="rec" value="blue"></label>

<label>Red<input type="radio" name="rec" value="red"></label>

<label>Black<input type="radio" name="rec" value="black"></label>

<label>Yellow<input type="radio" name="rec" value="yellow"></label>

<h2>Choose Your H2 Border</h2>

<label>Solid<input id="input2" type="radio" name="rec2" value="solid"></label>

<label>Dotted<input id="input2" type="radio" name="rec2" value="dotted"></label>

<label>Dashed<input id="input2" type="radio" name="rec2" value="dashed"></label><br/>


<input type="submit" value="submit" onClick="

$(document).ready(function()
{
   var fontColor = $('input').attr('value')
   var borderType = $('#input2').attr('value')

$('h2').ready(function() {

$(this).css('color', fontColor);     //font color
$(this).css('border-type', borderType); //border color

});">

</div>

Answer 1

ready方法不适用于内联元素。您只能将它应用于Document（因为它包含要加载的整个DOM）。只需省略h2 ready wrapper并将其内容粘贴到doc ready函数中。

$(document).ready(function(){
   var fontColor = $('input').attr('value'),
   borderType = $('#input2').attr('value');
   $(h2).css('color', fontColor);     //font color
   $(h2).css('border-type', borderType); //border color
});

注意：您需要为单选按钮单独设置一个单击处理程序，以便在初始加载后更改颜色。

示例（您需要修改它以匹配您的元素ID / Class）：

$('#yourRadioButtonElement').click(function() {
   if($('#yourRadioButtonElement').is(':checked')) {  
       fontColor = $(this).attr('value');
       borderType = $(this).attr('value');
       $(h2).css('color', fontColor);     //font color
       $(h2).css('border-type', borderType); //border color
   }
});

Answer 2

正如@Korgrue在他的回答中提到的那样，document为ready后，其中包含h2等所有页面元素，因此调用$('h2').ready(...并不是border-type。没有任何意义。

h2不是border的有效CSS样式，您只需要onsubmit="return false"。

请参阅this answer了解如何正确选择无线电值。

您还无法查看样式更改，因为您只需点击按钮即可提交表单，因此只需刷新页面即可。处理这种情况的一种方法是在表单中添加onclick。

最后，您应该只使用一个函数，因为它看起来更具可读性，而不是对function change_css(){ $(document).ready(function() { var fontColor = $('input[name=rec]:checked').attr('value'); var borderType = $('input[name=rec2]:checked').attr('value'); $('h2').css('color', fontColor); //font color $('h2').css('border', borderType); //border color }) }属性进行如此多的干扰。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form onsubmit="return false">
<label>Green<input type="radio" name="rec" value="green"></label>

<label>Blue<input type="radio" name="rec" value="blue"></label>

<label>Red<input type="radio" name="rec" value="red"></label>

<label>Black<input type="radio" name="rec" value="black"></label>

<label>Yellow<input type="radio" name="rec" value="yellow"></label>

<h2>Choose Your H2 Border</h2>

<label>Solid<input id="input2" type="radio" name="rec2" value="solid"></label>

<label>Dotted<input id="input2" type="radio" name="rec2" value="dotted"></label>

<label>Dashed<input id="input2" type="radio" name="rec2" value="dashed"></label><br/>


<input type="submit" value="submit" onclick="change_css()">

＆＃13;

{{1}}

＆＃13;

更改颜色和边框的JQuery表单

2 个答案: