动态添加class属性



就如之前文章中提到的，我的毕设是要做一个在线的流程图编辑系统。

首先，我定义三个<li>，单击后为canvas添加相应的形状。

<div class="sidebar node-palette" > <div id="sidebarMenu"><ul><li title="Click to add new" class="jtk-surface-droppable-node jsplumb-draggable" jtk-node-type="question"><i class="icon-tablet"></i>Question</li><li title="Click to add new" class="jtk-surface-droppable-node jsplumb-draggable" jtk-node-type="action"><i class="icon-eye-open"></i>Action </li><li title="Click to add new" class="jtk-surface-droppable-node jsplumb-draggable" jtk-node-type="output"><i class="icon-eye-open"></i>Output  </li></ul></div></div>

/*-------------------我是注释，我是注释，代码粘上去灰底黑字好丑好丑，嫌弃脸( ▼-▼ )---------------------*/

以question为例，定义question为一个菱形，这是代码：

function dispQuestionPrompt(){ // add question nodevar name = prompt("enter the action name");if (name) {var canvas = document.getElementById("canvas");var node = document.createElement("div");node.setAttribute("class","window jtk-node nodeDiamond");node.setAttribute("id","question");node.setAttribute("title","Down to false, Right to true");node.id += countQuestion;countQuestion++;var textNode = document.createElement("p");textNode.setAttribute("class","questionText");var text = document.createTextNode(name);textNode.appendChild(text);node.appendChild(textNode);canvas.appendChild(node);return(node.id);}}

那么问题来了，如果我想为动态添加的div再添加class属性，怎么办呢？

方法之一就是监听”canvas“，也就是添加的div所在的parentnode。

$(document).ready(function(){var canvas = $("#canvas");canvas.bind("DOMNodeInserted",function(e){$("#canvas div").addClass("jsplumb-connected");});}); 

但是，这个方法有缺陷，就是每当改动一次 canvas，就会为canvas的所有div节点设置一次属性。有心的小伙伴可以将函数体改为alert（”biu~biu~biu~“）试试。

如果不影响效果，此缺陷可以忽略。

当然，我也会再找其它改进方法，期待我以后的博客吧~~~