Question

我想通过myselfe创建一个radiobutton。我用jQuery和php技术创建样式。我的问题是风格。我想点击第一个按钮，然后它应该是蓝色，如果我点击第二个按钮，那么第二个按钮应该是蓝色，第一个按钮应该是白色。我的问题是，backgroundcolor永远不会改变。我知道，变量是可以的（我在控制台中观看）。他们改变了！但背景颜色并不适合。如果有人可以帮助我，我将非常感谢！谢谢!!!

HTML：

<table class="radiobutton_table" id="radiobutton_table-id">
    <tr class="radiobutton_table-tr" id="radiobutton_table-tr-id">
        <td class="radiobutton_table-tr-td radiobutton_one" id="radiobutton_true">
            <span class="radiobutton-text" id="radiobutton-text-True">True</span>
        </td>
        <td class="radiobutton_table-tr-td radiobutton_two" id="radiobutton_false">
            <span class="radiobutton-text" id="radiobutton-text-False">False</span>
        </td>
    </tr>
</table>

jQuery的：

[![var button_1 = false;
var button_2 = false;

$(document).ready(function() {

    if($('#radiobutton_true').click(function() {

        button_1 = true;

        if(button_2 == true) {
            button_2 = false;
        }

    }))

    if($('#radiobutton_false').click(function() {

        button_2 = true;

        if(button_1 == true) {
            button_1 = false;
        }

    }))

    while(button_1 == true) {

        $('#radiobutton_true').css({"background-color": "blue"});
        $('#radiobutton_false').css({"background-color": "white"});

    }

    while(button_2 == true) {

        $('#radiobutton_false').css({"background-color": "blue"});
        $('#radiobutton_true').css({"background-color": "white"});

    }
    })][1]][1]

Answer 1

您需要在.click处理程序中更改样式，而不是使用if或while。

$(document).ready(function() {

  $('#radiobutton_true').click(function() {

    $('#radiobutton_true').css({
      "background-color": "blue"
    });
    $('#radiobutton_false').css({
      "background-color": "white"
    });
  });

  $('#radiobutton_false').click(function() {

    $('#radiobutton_false').css({
      "background-color": "blue"
    });
    $('#radiobutton_true').css({
      "background-color": "white"
    });

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="radiobutton_table" id="radiobutton_table-id">
  <tr class="radiobutton_table-tr" id="radiobutton_table-tr-id">
    <td class="radiobutton_table-tr-td radiobutton_one" id="radiobutton_true">
      <span class="radiobutton-text" id="radiobutton-text-True">True</span>
    </td>
    <td class="radiobutton_table-tr-td radiobutton_two" id="radiobutton_false">
      <span class="radiobutton-text" id="radiobutton-text-False">False</span>
    </td>
  </tr>
</table>

jQuery - 创建Radiobuttons

1 个答案: