Question

我有以下代码：

<form style="align: center; position: absolute;">
  <input type="radio" name="group" id="groupA" value="A" checked>
  <label for="ref-annulus">A</label>
  <input type="radio" name="group" id="groupB" value="B">
  <label for="ref-planet">B</label>
  <input type="radio" name="group" id="groupC" value="C">
  <label for="ref-sun">C</label>
  <input type="radio" name="group" id="groupD" value="D">
  <label for="ref-sun">D</label>
</form>

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

<script>
var matrix_A = [
                [0,3,1,3,1,3,3],
                [1,0,3,1,3,2,1],
                [3,1,0,1,3,1,3],
                [1,3,3,0,3,3,3],
                [3,1,1,1,0,1,3],
                [1,3,3,1,3,0,3],
                [2,3,1,1,1,1,0]
               ],
var matrix_B = [
                [0,3,1,3,3,1,3],
                [1,0,1,3,3,3,3],
                [3,3,0,1,3,3,3],
                [1,1,3,0,1,1,3],
                [1,1,1,3,0,1,3],
                [3,1,1,3,3,0,3],
                [0,1,1,0,0,0,0]
               ];

var matrix = "matrix_"+$('input[name="group"]:checked').val();

console.log(matrix);
</script>

但是，我希望看到一旦单击A按钮，'maxtrix'变量将自动调用matrix_A，如果单击按钮B，它将自动调用matrix_B。但它没有。

你能帮我解决这个问题吗？感谢。

Answer 1

因为您在页面加载时执行一次JavaScript代码，然后再也不会执行。相反，您应该为点击单选按钮添加.on listener并重新评估哪个是单击的按钮。有很多方法可以做到这一点，可能比我在这里做得更好，但这是一个如何完成你正在寻找的简单例子。

＆＃13;

$(document).ready(function () {

  var matrix_A = [
                  [0,3,1,3,1,3,3],
                  [1,0,3,1,3,2,1],
                  [3,1,0,1,3,1,3],
                  [1,3,3,0,3,3,3],
                  [3,1,1,1,0,1,3],
                  [1,3,3,1,3,0,3],
                  [2,3,1,1,1,1,0]
                 ];
  var matrix_B = [
                  [0,3,1,3,3,1,3],
                  [1,0,1,3,3,3,3],
                  [3,3,0,1,3,3,3],
                  [1,1,3,0,1,1,3],
                  [1,1,1,3,0,1,3],
                  [3,1,1,3,3,0,3],
                  [0,1,1,0,0,0,0]
                 ];
  function evaluateMatrix(){
    var matrix = "matrix_"+$('input[name="group"]:checked').val();
    console.log(matrix);
  }
  
  $(document).on('click', 'input[name="group"]', evaluateMatrix);
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<form style="align: center; position: absolute;">
  <input type="radio" name="group" id="groupA" value="A" checked>
  <label for="ref-annulus">A</label>
  <input type="radio" name="group" id="groupB" value="B">
  <label for="ref-planet">B</label>
  <input type="radio" name="group" id="groupC" value="C">
  <label for="ref-sun">C</label>
  <input type="radio" name="group" id="groupD" value="D">
  <label for="ref-sun">D</label>
</form>
</body>

＆＃13;

Answer 2

你想输出matrix_A的值吗？

我认为您可以尝试eval

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form style="align: center; position: absolute;">
  <input type="radio" name="group" id="groupA" value="A" checked>
  <label for="ref-annulus">A</label>
  <input type="radio" name="group" id="groupB" value="B">
  <label for="ref-planet">B</label>
  <input type="radio" name="group" id="groupC" value="C">
  <label for="ref-sun">C</label>
  <input type="radio" name="group" id="groupD" value="D">
  <label for="ref-sun">D</label>
</form>


<script>
$(document).ready(function(){
  var matrix_A = [
                  [0,3,1,3,1,3,3],
                  [1,0,3,1,3,2,1],
                  [3,1,0,1,3,1,3],
                  [1,3,3,0,3,3,3],
                  [3,1,1,1,0,1,3],
                  [1,3,3,1,3,0,3],
                  [2,3,1,1,1,1,0]
                 ];
  var matrix_B = [
                  [1,3,1,3,3,1,3],
                  [1,0,1,3,3,3,3],
                  [3,3,0,1,3,3,3],
                  [1,1,3,0,1,1,3],
                  [1,1,1,3,0,1,3],
                  [3,1,1,3,3,0,3],
                  [0,1,1,0,0,0,0]
                 ];
  $("input:radio").click(function(){
    var matrix = "matrix_"+$('input[name="group"]:checked').val();
    console.log(eval(matrix));
  })
})
</script>

Answer 3

每当您发现自己试图动态访问变量名时，就应该使用数组或对象。因此，您应该创建一个单个矩阵matrix_A，而不是两个变量matrix_B和matrixes，它包含一个对象，其键是矩阵名称。

var matrixes = {
  A: [
    [0, 3, 1, 3, 1, 3, 3],
    [1, 0, 3, 1, 3, 2, 1],
    [3, 1, 0, 1, 3, 1, 3],
    [1, 3, 3, 0, 3, 3, 3],
    [3, 1, 1, 1, 0, 1, 3],
    [1, 3, 3, 1, 3, 0, 3],
    [2, 3, 1, 1, 1, 1, 0]
  ],
  B: [
    [0, 3, 1, 3, 3, 1, 3],
    [1, 0, 1, 3, 3, 3, 3],
    [3, 3, 0, 1, 3, 3, 3],
    [1, 1, 3, 0, 1, 1, 3],
    [1, 1, 1, 3, 0, 1, 3],
    [3, 1, 1, 3, 3, 0, 3],
    [0, 1, 1, 0, 0, 0, 0]
  ]
};

var matrix = matrixes[$('input[name="group"]:checked').val()];

要在用户单击其中一个单选按钮时执行此操作，请将其放在单击事件处理程序中。

var matrix;
$(":radio[name=group]").click(function() {
    matrix = matrixes[$(this).val()];
});

您不需要:clicked选择器，因为单击单选按钮始终会使该选项成为选定选项。

来自单选按钮的JS错误

3 个答案: