有效地使用jquery和javascript来保持代码分离(effectively using jquery and javascript to keep the code separate)

我正在使用php和jquery构建应用程序，它有许多ajax负载和功能。我想知道的是使用jquery访问dom元素并使用jquery和javascript向它添加事件以及以下实例中是否有任何经验法则最广泛使用和可接受的方式是什么。（以及我如何现在就做）

查询生成记录列表，并且必须编辑和删除每个记录。

生成的记录如下所示

<a href="javascript:;" class="edit" id="edit-id-300" alt="edit-type-1">Record1</a> <a href="javascript:;" class="delete" id="delete-id-300" alt="delete-type-1">Record1</a> <a href="javascript:;" class="edit" id="edit-id-301" alt="edit-type-1">Record2</a> <a href="javascript:;" class="delete" id="delete-id-301" alt="delete-type-1">Record2</a> <a href="javascript:;" class="edit" id="edit-id-302" alt="edit-type-2">Record3</a> <a href="javascript:;" class="delete" id="delete-id-302" alt="delete-type-2">Record3</a>

我的jquery代码处理它们

$(".edit").click(function() { var currentElementId = $(this).attr("id").replace("edit-id-",""); $("#ajaxdiv").load("ajaxpage.php","editid="+currentElementId); });

这种东西好吗？我的意思是有任何其他方式来做这样的事情，特别是当这变得更复杂，如必须再添加3个标识符，然后爆炸它们并分别找出每个标识符。这里有任何指导方针。？

I am building app with php and jquery and it has many ajax loads and functionalities. What i would like to know is what is the most widely used and acceptable way of accessing dom elements with jquery and adding events to it using jquery and javascript and if there is any rule of thumb to follow for the following instances.(and how i do them now)

A query generates a list of records and each record has to be edited and deleted.

The generated records look like this

<a href="javascript:;" class="edit" id="edit-id-300" alt="edit-type-1">Record1</a> <a href="javascript:;" class="delete" id="delete-id-300" alt="delete-type-1">Record1</a> <a href="javascript:;" class="edit" id="edit-id-301" alt="edit-type-1">Record2</a> <a href="javascript:;" class="delete" id="delete-id-301" alt="delete-type-1">Record2</a> <a href="javascript:;" class="edit" id="edit-id-302" alt="edit-type-2">Record3</a> <a href="javascript:;" class="delete" id="delete-id-302" alt="delete-type-2">Record3</a>

and my jquery code handle them would be

$(".edit").click(function() { var currentElementId = $(this).attr("id").replace("edit-id-",""); $("#ajaxdiv").load("ajaxpage.php","editid="+currentElementId); });

is this type of stuff ok? i mean is there any other way to do stuff like this especially when this gets more complicated like have to add 3 more identifiers to id and then exploding them and finding out each of the identifiers separately. Any guidelines here to follow.?

最满意答案

如果你只需要一些更干净的东西，也许你可以考虑将记录绑定到一个有意义的div中，并使用.live（）来绑定事件处理程序，即

<div data-rec-id = '300'> ... <span class='link del' data-act='del'>Delete</span> <span class='link edit' data-act='edit'>Edit</span> </div> <div data-rec-id = '301'> ... <span class='link del' data-act='del'>Delete</span> <span class='link edit' data-act='edit'>Edit</span> </div> $('.edit').live('click', function(){ var id = $(this).closest('[data-rec-id]').attr('data-rec-id'); $("#ajaxdiv").load("ajaxpage.php","editid="+id); });

甚至是通用的：

$('.link').live('click', function(){ var id = $(this).closest('[data-rec-id]').attr('data-rec-id'); var action = $(this).attr('data-act'); $("#ajaxdiv").load("ajaxpage.php","id="+id+"&act="+action); });

请不要使用以下内容：

<a href="javascript:;" ...

或者我建议你使用一些强大的框架。例如， http ： //documentcloud.github.com/backbone/

If you simply need to have something that can be cleaner, maybe you can consider bind the record into one meaningful div, and use .live() to bind the event handlers i.e.,

<div data-rec-id = '300'> ... <span class='link del' data-act='del'>Delete</span> <span class='link edit' data-act='edit'>Edit</span> </div> <div data-rec-id = '301'> ... <span class='link del' data-act='del'>Delete</span> <span class='link edit' data-act='edit'>Edit</span> </div> $('.edit').live('click', function(){ var id = $(this).closest('[data-rec-id]').attr('data-rec-id'); $("#ajaxdiv").load("ajaxpage.php","editid="+id); });

or even generic:

$('.link').live('click', function(){ var id = $(this).closest('[data-rec-id]').attr('data-rec-id'); var action = $(this).attr('data-act'); $("#ajaxdiv").load("ajaxpage.php","id="+id+"&act="+action); });

Please don't use something like:

<a href="javascript:;" ...

or I would suggest you use some robust framework. e.g., http://documentcloud.github.com/backbone/

更多推荐