Question

我刚开始在代码中使用jQuery来获取并删除其内容。我目前在使用“显示节点”按钮时遇到问题。问题是当它未被点击时，应该擦除节点，然后在再次单击按钮时重新绘制节点。我也会在下面发布我的编解码器。

到目前为止，仅在我取消选择“显示节点”然后单击“n-1”，“基态”或“n + 1”时才会清除节点。这是相关的代码。谢谢你们。

Codepen：https://codepen.io/kurtacus/pen/EXbYyZ

var n = 1;

function drawNodes() {
  clearNodes();
  for (var m = 1; m < n; m++) {
    var nodeLocation = (m / n) * 400 + 150;
    document.getElementById("nodeDrawing").innerHTML += '<circle cx="' + nodeLocation + 'cy="150" r="4" stroke="black" stroke-width="2" fill = "red" / > ';
  }
  m = 1;
};

function clearNodes() {
  $("svg").find("g").empty(); //uses jQuery empty contents of <g>
};

function transformToSVG(n, coordinates) {
  clearNodes();
  if ($(showNodes).hasClass('active')) {
    drawNodes();
  } else if ($(showNodes).hasClass('inactive')) {
    clearNodes();
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="showNodes" type="button" onClick="jQuery(this).toggleClass('active').click(drawNodes())" value="Show nodes">

Answer 1

您在“显示节点”按钮上设置的onClick处理程序切换活动类，但没有注意到类更改，并且没有任何内容根据show nodes click调用transformToSVG，这是查看类的函数。

快速（但不是很漂亮）这样做的方式似乎在codepen中工作只是为onClick添加更多逻辑。

<input 
    id="showNodes" 
    type="button" 
    onClick="jQuery(this).toggleClass('active').hasClass('active') ? drawNodes() : clearNodes()" value = "Show nodes">

Answer 2

您正在尝试错误地使用jQuery在单击按钮后将事件处理程序绑定到按钮。

试试这个。

<input id="showNodes" type="button" onclick="jQuery(this).toggleClass('active'); drawNodes();"

此外，您尝试完成的语法：

jQuery('#showNodes').click(function() { drawNodes();});

通常，jQuery的事件绑定包含在将在文档准备好时调用的函数内部。

jQuery(document).ready(function() {
    jQuery('#showNodes').click(function() { drawNodes();});
});

jQuery按钮和功能

2 个答案: