动态添加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 node
	var 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~“）试试。

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

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