Question

如何添加编辑背景颜色（通过输入）和边框重量（通过输入）的选项。请看看我的剧本。

我不是JS专家，请举一个JSFiddle的例子。

＆＃13;

$('.divSpecific input').click(function(){
   
    if($(this).attr("alt") == "1")
        $('div.signUp').css("background","red")
          .css("color","black");
            
    else if ($(this).attr("alt") == "2")
        $('div.signUp').css("background","yellow")
          .css("color","black");
    else
        $('div.signUp').css("background","cyan")
          .css("color","white");
  });

＆＃13;

div.divSpecific {
    height: 20px;
}
.signUp{
    border:solid 1px;
    height:20px;
    width:100px;
    text-align:center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>First step - choose button</div>
<div class="divSpecific">Design - ver.1<input type="radio" alt="1" name="name" /></div>
<div class="divSpecific">Design - ver.2<input type="radio" alt="2" name="name" /></div>
<div class="divSpecific">Design - ver.3<input type="radio" alt="3" name="name" /></div>

<br>
  
<div>Or change manually background, text abd border (HEX format)</div>
<div>Background color<input type="text"><input type="submit" value="Confirm">
<div>Text color<input type="text"><input type="submit" value="Confirm"></div>
<div>Border color <input type="text"><input type="submit" value="Confirm"></div>

<br>

<div>And change border weight</div>
<div>Border weight (default 1 px)<input type="text"><input type="submit" value="Confirm">

<br><br>

<div class="signUp">Sign Up</div>

＆＃13;

Answer 1

创建一个函数，该函数将处理应用CSS样式，然后将一些数据属性添加到无线电输入，并使用它们在文本区域中设置默认值。

＆＃13;

$('[type="radio"]').click(function() {
    $("#border_color").val($(this).attr("data-border-color")),
    $("#border_width").val($(this).attr("data-border-width")),
    $("#bg_color").val($(this).attr("data-bg-color")),
    $("#text_color").val($(this).attr("data-color")),
    applyStyles();
})

$('[type="submit"]').click(function() {
    applyStyles();
})
  
function applyStyles() {
    $('div.signUp').css({
        borderColor: $("#border_color").val(),
        borderWidth: $("#border_width").val(),
        backgroundColor: $("#bg_color").val(),
        color: $("#text_color").val(),
    })
}

＆＃13;

div.divSpecific {
    height: 20px;
}
.signUp{
    border:solid 1px;
    height:20px;
    width:100px;
    text-align:center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div>First step - choose button</div>

<div class="divSpecific">Design - ver.1<input type="radio" data-bg-color="red" data-border-color="black" data-color="black" data-border-width="2" alt="1" name="name" /></div>
<div class="divSpecific">Design - ver.2<input type="radio" data-bg-color="yellow" data-border-color="black" data-color="black" data-border-width="2"  alt="2" name="name" /></div>
<div class="divSpecific">Design - ver.3<input type="radio" data-bg-color="cyan" data-border-color="black" data-color="white" data-border-width="2"  alt="3" name="name" /></div><br/>
  
<div>Or change manually background, text abd border (HEX format)</div>
<div>Background color<input id="bg_color" type="text"><input type="submit" value="Confirm"></div><!-- you were missing a close div here -->
<div>Text color<input id="text_color" type="text"><input type="submit" value="Confirm"></div>
<div>Border color <input id="border_color" type="text"><input type="submit" value="Confirm"></div><br>

<div>And change border weight</div>
<div>Border weight (defoult 1 px)<input id="border_width" type="text"><input type="submit" value="Confirm"></div><!-- ...and here -->

<br><br>

<div class="signUp">Sign Up</div>

＆＃13;

Answer 2

从它的外观来看，您可能想尝试更改事件而不是点击吗？

Answer 3

一个选项是为每个为您调用函数的按钮添加onClick选项：

<input type="text" id="backgroundInput"><button onClick="updateBackground()">Confirm</button>

function updateBackground() {
    $('div.signUp').css('background-color', $('#backgroundInput');
}

只需冲洗并重复其他三个输入。

另一个选择是，您可以为每个按钮分配一个ID，并通过为每个按钮添加.click（function（）...）处理程序来执行与单选按钮相似的操作。

通过表单编辑CSS - 实时预览

3 个答案: