Question

我有这个演示https://jsfiddle.net/DTcHh/18578/。我试图做的是当用户点击bussines按钮寄存器的背景变为绿色，并在模态标题我有图像我也想改变它。有什么建议吗？

<div class="modal-header">

                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                  <h4 class="modal-title" id="exampleModalLabel"><img src="img/user_icon_blue.png" />REGISTER</h4>
                  <span class="reg_type">SELECT ACCOUNT TYPE</span>
                    <div class="typeOfRegistration">
                        <input type="radio" id="radio02" class="green" name="typeOfRegistration" data-target="#business" />
                        <label for="radio02"><span></span>Business</label>
                    </div>
                    <div class="typeOfRegistration">
                      <input type="radio" checked="checked" class="blue" id="radio01" name="typeOfRegistration" data-target="#personal"/>
                      <label for="radio01"><span></span>Personal</label>
                    </div>
                    <div class="line"></div>
                </div>

Answer 1

使按钮颜色和图像更改的jquery可以如下：

$("input[type='radio']").on("change", function(){
    var rdo = $(this)[0];
    if(rdo.id == "radio02"){
        $(".btn, .btn-primary").css({
          backgroundColor: "green"
        });
        $("#registrationImg").remove();
      } else {
        $(".btn, .btn-primary").css({
          backgroundColor: "#428BCA"
        });
        //$("#exampleModalLabel").append('<img id="registrationImg" src="user-icon_blue.png" />');
        var lbl = $('#registrationLabel');
        $('<img id="registrationImg" src="user-icon_blue.png" />').insertBefore(lbl);
      }
});

参见FIDDLE 请注意对html进行的一些细微更改。

更改单选按钮时更改模态按钮的图像和背景颜色？

1 个答案: