Question

当我开始学习一门新语言时，我总觉得我没有采用实用，标准的方式。所以这里有一个关于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.


});

Answer 1

我同意@Tommi，你不会编写超出你需要的代码，并且还要将你的ajax调用合并到一个地方，而不是有3个大致相同的ajax调用（或编写ajax函数并从3调用它）不同的位置）。

如果这对您有用而且不会引起混淆，我认为它没有任何问题。事实上，有许多方法可以用丑陋而不雅的方式做你想做的事情，但这不是其中之一。

Answer 2

我说这样做你正在做的事情并没有错。在这样的调度程序函数中使用双类实际上非常干净和可读。

Answer 3

如果一个对象将用户和事件作为类，那么该操作将是事件而不是用户？

Answer 4

此解决方案使您的系统依赖于javascript工作。一个更强大的解决方案是在没有javascript的情况下构建至少功能的东西，然后在加载时使用javascript来修改按钮的行为以执行更多ajax-y。

它需要更多代码才能以这种方式执行，并且看起来更优雅。但是，如果您正在寻找“最佳”解决方案，您可能需要权衡并确定处理“无javascript”角落是否优先。

你决定采用哪种方式，你至少应该有意识地做出这样或那样的决定，而不是让它在以后让你感到惊讶。

Answer 5

您可能想为AJAX创建一个单独的函数，并将action传递给它。

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

Answer 6

这段代码很好看。但是我建议直接在<a>上使用onClick事件，而不是依赖于jquery为元素添加功能。

虽然jquery做了一个可以接受的工作，但最终会得到难以阅读的代码，因为最终结果并没有显示实际存在与onClick事件关联的事件处理程序的事实。我个人更喜欢能够看到实际执行的代码，使用像Firebug这样的工具来检查我正在服务的页面。

如果您是唯一一个阅读过您代码的人，那么这不是问题。

Answer 7

如果我想做这样的事情，我会更多地概括一些事情，比如这个

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>

无法为新类型添加其他代码。

Answer 8

假设你有一个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成功上触发不同的功能，那么我认为你的方式是最好的选择。

Answer 9

在阅读代码时，我有同样的想法，即将代码重构为更短的代码，特别是代码结构中存在重复。

以下解决方案获取已单击的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...

});

有用。但这是最好的做法吗？

9 个答案: