代码之家 › 专栏 › 技术社区 › sqram

它起作用了。但这是最佳实践吗?

jquery

sqram · 技术社区 · 15 年前

当我开始学习一门新的语言时,我总是觉得我没有用实际的、标准的方式来学习。所以这里有一个关于jquery的问题,我所做的是否可以接受。

我有3张照片。

<img src="del.png" class="delete user" />
<img src="del.png" class="delete event" />
<img src="del.png" class="delete recipe" />

然后让jquery在$('.delete')上检测到一个单击事件。

$('.delete').click(function() {
    if( $(this).hasClass('user') ) {
        action = 'user'
    }

    if( $(this).hasClass('event') ) {
        action = 'event'
    }

   if( $(this).hasClass('recipe') ) {
        action = 'recipe'
    }

   // I then use ajax, send the action as $_POST to the PHP script
   // and it tells PHP what to delete.

   // Doing it this way, I don't have to use 3 onclick functions and 3 ajax functions.


});

9 回复 | 直到 15 年前

Brett Bender 15 年前

我同意@tommi的观点,您正在阻止自己编写超出您需要的代码,并将Ajax调用合并到一个位置,而不是进行3次大致相同的Ajax调用(或编写Ajax函数并从3个不同的位置调用它)。

如果这对你有用而且不令人困惑的话,我认为没有什么问题。事实上,有很多方法可以让你以一种丑陋而不雅的方式去做你想做的事情,但这不是其中之一。

Tommi Forsström 15 年前

我要说的是,这样做没有什么不对。在这样一个调度器函数中使用双类实际上是非常干净和可读的。

cjk 15 年前

如果对象将用户和事件作为类,那么操作将是事件而不是用户?

tylerl 15 年前

此解决方案使您的系统依赖于javascript才能工作。一个更强大的解决方案是建立至少 功能性 如果没有javascript,然后在加载时使用javascript修改按钮的行为,以执行更多的Ajax-Y操作。

这样做需要更多的代码,而不是看优雅。但是,如果您正在寻找“最佳”解决方案,您可能需要权衡并确定处理“无javascript”角的情况是否是一个优先级。

无论你选择哪条路线,你至少应该有意识地以一种或另一种方式做出决定,而不是让它在以后给你惊喜。

Mark 15 年前

您可能希望为Ajax创建一个单独的函数,并传递 action 进入它。

正如您的代码所示,它将允许您动态地更改操作,并为一个操作多个操作 img . 我会记录下这是否是故意的。

LaustN 15 年前

这个密码很容易被孤立地看到。不过,我建议在 <a> 直接,而不是依赖jquery向元素添加功能。

虽然jquery对它做了一个可接受的工作,但最终得到的代码是难以读取的,因为最终结果并不显示实际存在一个与onclick事件关联的事件处理程序。我个人更希望能够看到实际正在执行的代码,使用Firebug等工具检查正在服务的页面。

如果你是唯一一个读过你的代码的人,这是一个没有问题的OFC。

fforw 15 年前

如果我想做这样的事情,我会更概括一些,像这样

function getType(elem)
{
    var m = /\btype:([a-zA-Z_]+)\b/.exec(elem.className);
    return m ? m[1] : null;
}

function deleteType(type)
{
    // delete code instead of alert
    alert("Deleting type " + type);
}

$(function()
{
    $(".delete").click(function(ev)
    {
        var type = getType(this);
        if (type)
        {
            deleteType(type);
        }
        return false;
    });
});

用于以下元素

<a href="#" class="delete type:foo">delete foo</a>
<a href="#" class="delete type:bar xxx">delete bar</a>
<a href="#" class="delete">do nothing</a>

没有要为新类型添加的附加代码。

IonuÈ Staicu 15 年前

假设你有一个 LI 结构(或类似物):

<ul>
    <li>Some text <a href="delete.php?do=user">delete</a></li>
    <li>Some text <a href="delete.php?do=event">delete</a></li>
    <li>Some text <a href="delete.php?do=recipe">delete</a></li>
</ul>

你可以这样做

$('.delete').click(function(){
    var t=$(this);
    jQuery.ajax({
        type: "GET",
        url: t.attr('href'),
        cache: false,
        success: function(data){
            t.parent().remove(); // you remove the whole li tag
        }
    });
});

当然,如果您需要在Ajax成功上触发不同的函数,那么您的方法我认为是最好的选择。

Hady 15 年前

在阅读您的代码时,我有同样的冲动,将代码重构为更短的代码,特别是代码结构中存在重复。

下面的解决方案获取已单击的DIV类的列表。然后它检索列出的最后一个类。

$('.delete').click(function() {

   // Your 'action' class type must always be the last in the list
   action = $(this).attr('class').split(' ').slice(-1); 

   // Remaining logic goes here...

});