Question

我正在寻找一个允许我为DOM元素指定css类并将它们映射到javascript函数以定义onclick之类的事件的库。例如：

<form class="auto delete">
    <input type="checkbox" class="auto submit"/>
</form>

然后我需要写的是：

function Form_autoDelete(form){
    form.action = '/forms/delete_stuff/';
    form.method = 'post';
    form.onsubmit = function () { alert('thanks!'); }
}

和

function Checkbox_autoSubmit(form,checkbox){
    checkbox.onclick = function(isChecked){
                           form.submit();
                        }
}

然后当有人检查框（或取消选中）时，表单将自动提交给/forms/delete_stuff/，而我实际上不必在html中编写任何内容，而是编写css类。如果存在，我无法找出要搜索的内容。

是否已有这样的现有库？

Answer 1

似乎答案可能是否，所以我自己写了。
从github获取最新的代码和文档：https://github.com/JakarCo/javascript-dom

我为编写代码段所编写的代码是jdomA_link(parent,a)函数和a标记中的两个css类。总的来说，我认为非常简单易用。

请注意<a>标记上唯一的代码是两个css类，其余的由JS处理。请注意，您可以使用HTML执行任何操作。我在这里使用了仅限JS的解决方案。

function jdomA_link(parent,a){
    a.href = 'https://stackoverflow.com';
    a.style.backgroundColor = '#0F0';
    var counter = 0;
    a.onclick = function(){
      a.innerText = 'you clicked me '+(++counter)+' times';
      a.style.backgroundColor = '#0FF';
    }
}

/*
* Make sure to either include this code AFTER all your jdom functions
* or remove `JDOMProcessor.pageLoaded();` from the bottom of this file 
* and put it somewhere you KNOW it will be loaded after your jdom functions
*
* I can't, at this time, guarantee execution order of your jdom functions
*/

/** I'm enclosing so that function names don't conflict with user's functions
*
*/
var JDOMProcessor = {
	/**returns string with first char capital and the rest lower case
	*/
	capitaliseFirstLetter : function(string)
	{
		return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
	},
	/**returns class list without the jdom class
	*/
	classList : function(element){
		var classList = element.className;
		var array = classList.split(" ");
		for(var i = 0; i <array.length; i++) {
			if(array[i] == 'jdom') {
			   array.splice(i, 1);
			}
		}
		return array;
	},
	/** the page has finished loading. This maps everything
	*/
	pageLoaded: function(logFuncNames){
	  logFuncNames = logFuncNames || false;
		var elementList = document.getElementsByClassName('jdom');	
		for (var i = 0;i<elementList.length;i++){
			var element = elementList[i];
			var classList = this.classList(element);
			var parent = element.parentNode;
			var classListString = classList.join('_');
			var parentName = this.capitaliseFirstLetter(parent.tagName);
			var elementName = this.capitaliseFirstLetter(element.tagName);
			var didFunc = false;
			var tagIndex = 0;
			var classes = classList.length;
			while (!didFunc&&classes>0){
				var tagNames = [parentName,elementName,'' ];
				var funcName = 'jdom'+tagNames.slice(tagIndex).join('')+"_"+classList.slice(0,classes).join("_");
				
				var func = window[funcName];
				if (func!=null){
					func(parent,element);
					didFunc = true;	
				}
				
				if (++tagIndex>tagNames.length){
					classes = --classes;
					tagIndex = 0;
				}
				if (logFuncNames)console.log(funcName);
			}
		}
	}
}
//you can remove this call from the file and place it somewhere on your own if you'd like.
JDOMProcessor.pageLoaded();

<a class="jdom link">link text</a>

用于管理DOM操作和属性的Javascript库

1 个答案: