Question

切换单选按钮后，以某种方式更改功能无法正确触发。目前，我没有收到任何日志消息＆＃34;圈取消选中＆＃34;或＆＃34;箭头取消选中＆＃34;。 HTML看起来像这样：

＆＃13;

var drawingArrow = document.getElementById('drawing-arrow-shape'),
  drawingCircle = document.getElementById('drawing-circle-shape');

drawingCircle.onchange = function() {
  console.log("on change circle btn");
  if ($("#drawing-circle-shape").is(":checked")) {
    console.log("circle checked");
  } else {
    console.log("circle uncheck");
  }
};

drawingArrow.onchange = function() {
  console.log("on change arrow btn");
  if ($("#drawing-arrow-shape").is(":checked")) {
    console.log("arrow checked")
  } else {
    console.log("arrow uncheck");
  }
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="btn btn-default btn-lg">
  <input type="radio" name="drawing-shape" id="drawing-arrow-shape">
  <i class="glyphicon glyphicon-arrow-right"></i>
</label>
<label class="btn btn-default btn-lg">
  <input type="radio" name="drawing-shape" id="drawing-circle-shape">
  <i class="glyphicon glyphicon-record"></i>
</label>

＆＃13;

Answer 1

我对你的Js进行了一些小改动，现在它正在工作，请检查我做出的以下更改

var drawingArrow = document.getElementById('drawing-arrow-shape');
var drawingCircle = document.getElementById('drawing-circle-shape');

刚刚删除了逗号并制作了单独的变量。

＆＃13;

var drawingArrow = document.getElementById('drawing-arrow-shape');
      var  drawingCircle = document.getElementById('drawing-circle-shape');


    drawingCircle.onchange = function() {
        console.log("on change circle btn");
        if($("#drawing-circle-shape").is(":checked")) {
            console.log("circle checked");
        } else {
            console.log("circle uncheck");
        }
    };

    drawingArrow.onchange = function() {
        console.log("on change arrow btn");
        if($("#drawing-arrow-shape").is(":checked")) {
            console.log("arrow checked")
        } else {
            console.log("arrow uncheck");
        }
    };

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="btn btn-default btn-lg">
        <input type="radio" name="drawing-shape" id="drawing-arrow-shape">
        <i class="glyphicon glyphicon-arrow-right"></i>
    </label>
    <label class="btn btn-default btn-lg">
        <input type="radio" name="drawing-shape" id="drawing-circle-shape">
        <i class="glyphicon glyphicon-record"></i>
    </label>

＆＃13;

Answer 2

你需要改变这两个陈述：

   var drawingArrow = document.getElementById('drawing-arrow-shape');
        drawingCircle = document.getElementById('drawing-circle-shape');

两者都有','导致问题。用';'替换它来修复它。

Answer 3

问题是因为第二个变量定义之后的,应该是;。这让JS解释器感到困惑，因为它认为下一个语句将是一个变量定义，而实际上它是一个变量setter。

但是，您应该注意，您可以直接在元素上使用addEventListener()来改善逻辑。然后，您可以使用this关键字来引用元素，而无需使用jQuery来选择已经引用的元素。试试这个：

＆＃13;

document.getElementById('drawing-arrow-shape').addEventListener('change', function() {
  if (this.checked)
    console.log('arrow checked');
});

document.getElementById('drawing-circle-shape').addEventListener('change', function() {
  if (this.checked) 
    console.log('circle checked');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="btn btn-default btn-lg">
  <input type="radio" name="drawing-shape" id="drawing-arrow-shape">
  <i class="glyphicon glyphicon-arrow-right"></i>
</label>
<label class="btn btn-default btn-lg">
  <input type="radio" name="drawing-shape" id="drawing-circle-shape">
  <i class="glyphicon glyphicon-record"></i>
</label>

＆＃13;

JavaScript onchange不会在单选按钮上触发

3 个答案: