Question

脚本如下;

$("#Results a").live('dblclick', function(event){
    var src = $(this).attr("href");
    if (event.type === 'dblclick') {
        if ($(this).hasClass(".A")) {
            $('<img />', {'src': src,'class': 'Box'}).wrap('<div class="Packet" />').parent().insertAfter($('.Spot_A').parent());
        } else if ($(this).hasClass(".B")) {
            $('<img />', {'src': src,'class': 'Box'}).wrap('<div class="Packet" />').parent().insertAfter($('.Spot_B').parent());
        }
    }
});

我双击链接标记以创建一个img元素，该元素使用链接的href作为图像的src，并根据link元素所具有的类将此img放置在特定的位置。 img元素创建部分完美运行。但是，我现在正试图根据链接标记的类来“排序”各种imgs。这是我遇到麻烦的地方。对我而言，它似乎已经显而易见，但它无法发挥作用。

我想，它应该只是：当我双击一个链接时，如果这个（链接）有类 _ _，请在这里创建一个img。如果是diff类，那么在这里创建一个img。请注意，链接不会在任何时候被删除。

.parent / insertafter / parent部分是必需的，因为它是确定层次结构中的放置方式的一部分。 Spot_A / B是起点，这是排序的关键。

Answer 1

.hasClass()采用类的名称，而不是类选择器。删除期间。

if ($(this).hasClass("A")) {
    // stuff
} else if ($(this).hasClass("B")) {
    // other stuff
}

给予全面清理治疗：

$('#Results a').live('dblclick', function(event) {
    var $this = $(this),
        src = $this.attr('href'),
        target = $this.hasClass('A') ? '.Spot_A'
               : $this.hasClass('B') ? '.Spot_B'
               : null;

    if (target) {
        $(target).parent().after($('<div class="Packet"></div>').append($('<img />', {'src': src, 'class': 'Box'})));
    }
});

不要重复包装this，将$(this)存储在本地变量
无需检查event.type === 'dblclick'
与单引号和双引号一致
保持干燥
这更多是个人偏好的问题，但是一个简单的if-else案例可以用两套三元运算符更简洁地写成
根据the jQuery docs，可以包含其他元素的标记应与结束标记配对（使用$()创建新元素时）
清理元素创建调用

如果使用img Generation的条款问题

1 个答案: