将简单的jquery代码转换为javascript

I have a code for a simple photo gallery that had been writen with jquery, but i think it's overkill to load the entire library for such a simple thing. I want it in raw javascript.

我有一个用jquery编写的简单照片库的代码，但我认为，为了这么简单的事情加载整个库未免太过了。我想要原始的javascript。

$('#thumbs').delegate('img','click', function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $('#description').html($(this).attr('alt'));
});

Also i'm wondering how do I attach a loading spinner to this code. thanks.

我还想知道如何给这段代码附加一个加载微调器。谢谢。

jsfiddle

jsfiddle

2 个解决方案

#1

Without using any library, it looks a bit like this, although of course there are other ways to write it:

不使用任何库，它看起来有点像这样，当然也有其他的方法来写它:

(function() {
    var largeImage = document.getElementById('largeImage'),
        description = document.getElementById('description');

    document.getElementById('thumbs').onclick = handleGalleryClick;

    function handleGalleryClick(event) {
        var target;

        event = event || window.event;                // Handle IE difference
        target = event.target || event.srcElement;    // Another one
        if (target && target.tagName.toUpperCase() === "IMG") {
            largeImage.src = target.src.replace('thumb', 'large');
            description.innerHTML = target.getAttribute('alt');
        }
    }
})();

Make sure that script appears at the bottom of your page (just before the closing body element) or wrap it up in a window.onload although you won't be happy with how long that takes to occur, as window.onload happens after all images and such are loaded.

确保脚本出现在页面的底部(就在关闭主体元素之前)，或者将它封装在窗口中。onload，尽管你不会对它的运行时间感到满意，比如窗口。onload发生在加载所有图片之后。

But: I have to agree with Frédéric's and John's comments: It's not overkill to load a library for this, and in the case of jQuery (and Prototype and YUI) you can load via the Google CDN and use something your page visitor probably already has in their cache anyway.

但是:我必须同意Frederic和John的评论:为这个加载一个库并不过分，对于jQuery(以及Prototype和YUI)，您可以通过谷歌CDN加载，并使用页面访问者在缓存中可能已经有的东西。

Update: In the comments below, scunliffe pointed out an IE bug that I've blogged in the past that could affect the above, which is magically worked around for you by jQuery. So I thought it might be useful to flag up the various complications that this simple little script has that a good library will sort out for you:

更新:在下面的评论中，scunliffe指出了一个IE bug，我以前在博客中写过这个bug，它可能会影响上面的内容，这是jQuery神奇地为您解决的问题。所以我认为，标记出这个简单的小脚本所具有的各种复杂性可能会对你有所帮助:

addEventListener vs. attachEvent: IE6 through IE8 don't support the DOM2 standard addEventListener, using Microsoft's own attachEvent instead. I actually punted on this in the above for simplicity and just used the DOM0 onclick = ... style, but there's a good reason not to do that: With the DOM0 style, you can only have a single event listener per event per element, and attaching another will detach the previous one. So my code above doesn't play nicely with others, because it will dislodge any previous DOM0 click handler (and will be dislodged by a DOM0 click handler attached after the code above runs).
addEventListener vs attachEvent: IE6到IE8不支持DOM2标准addEventListener，而是使用微软自己的attachEvent。为了简单起见，我在上面使用了DOM0 onclick =…样式，但是有一个很好的理由不这样做:对于DOM0样式，每个元素每个事件只能有一个事件侦听器，附加另一个事件将分离前一个事件。因此，上面的代码不能很好地与其他代码配合，因为它将删除以前的DOM0单击处理程序(并将被上面代码运行后附加的DOM0单击处理程序所删除)。
Accessing the event object: The DOM standard says that the event object is passed into the event handler as its first argument. IE, instead, uses a global window.event object. That's the reason for my first "IE difference" above.
访问事件对象:DOM标准说事件对象被传递到事件处理程序中作为它的第一个参数。IE则使用全局窗口。事件对象。这就是我第一次“IE差异”的原因。
Properties on the event object: ...and similarly, the DOM standard says the actual element on which the event was fired will be the target property. IE6 through IE8 use srcElement instead. (There are other differences, too.) Hence my "Another one" comment.
事件对象的属性:…同样，DOM标准说，触发事件的实际元素将是目标属性。IE6到IE8使用srcElement代替。(还有其他的区别。)这就是我的“另一个”评论。
Bug workaround: This is the conflation thing scunliffe pointed out. The above relies on document.getElementById to work correctly, but on IE6 and IE7, it doesn't. It conflates several namespaces rather than working just with id values.
Bug解决方案:这是scunliffe指出的合并问题。以上依赖于文档。getElementById可以正常工作，但是在IE6和IE7上就不行。它合并了几个名称空间，而不只是使用id值。

...so all in all, this simple little script makes the point fairly well that libraries in general — and a good library in particular — can save you time, keep your site broadly-compatible, and are just generally worth their little cost. I don't know about the others, but for instance jQuery works around the conflation bug for you, but another well-known and well-respected library, Prototype, does not.

…总而言之，这个简单的小脚本很好地说明了这样一个问题:一般来说，库——尤其是一个好的库——可以节省您的时间，保持站点的广泛兼容性，并且总的来说，这些小开销是值得的。我不知道其他的库，但是例如jQuery为您解决了合并bug，但是另一个知名的、受人尊敬的库Prototype则没有。

(Side note: Before we knock Microsoft too much, let's remember that attachEvent and srcElement probably predate the DOM2 spec; Microsoft did a lot of innovating in IE5.5 and IE6. [They invented ajax, for instance.] IE6 was — by far — the best browser available in 2001, due apologies to Opera. That said, IE6 came out after the standard did and so adding the standards stuff at that point, or several years later in IE7, might have been a worthwhile thing to do! But IE9 fixes a lot of this stuff.)

(附带说明:在我们过多地批评微软之前，让我们记住attachEvent和srcElement可能比DOM2规范更早;微软在IE5.5和IE6上做了很多创新。例如，他们发明了ajax。[英语泛读材料到目前为止，IE6是2001年最好的浏览器，这是对Opera的道歉。也就是说，IE6是在标准发布之后发布的，所以在那时或者几年后在IE7中添加标准内容，可能是一件值得做的事情!但是IE9解决了很多问题)

#2

You call it simple, but it's doing somewhat advanced things. To emulate delegate, you have to attach a click listener on the root container and check for clicks on any <img> tag.

你可以说它很简单，但它在做一些高级的事情。要模拟委托，您必须在根容器上附加一个单击侦听器，并检查在任何将简单的jquery代码转换为javascript 标记上的单击。

Not to mention you have to do things like use attachEvent in IE instead of addEventListener

更不用说你必须在IE中使用attachEvent而不是addEventListener

The code would look something like (untested):

代码看起来像(未经测试的):

function listen(root, callback) {
    var addEvent = 'attachEvent';
    if (typeof window.addEventListener === 'function') {
        addEvent = 'addEventListener';
    }

    root[addEvent](function (e) {
        if (/img/i.test(e.target.tagName)) {
            callback.apply(e.target);
        }
    }, false);
}

listen(document.getElementById('thumbs'), function () {
    document.getElementById('largeImage').src = this.src.replace(/thumb/ig, 'large');
    document.getElementById('description').src = this.alt;
});

In fact, as TJ's post shows below, I'm not even handling all of the IE idiosyncrasies. jQuery is not overkill considering all of the browser headaches it solves for you.

事实上，正如TJ的文章所示，我甚至没有处理所有的IE特性。考虑到jQuery为您解决的所有浏览器难题，jQuery并没有让您感到多余。

#1