2

给定一个 HTML 片段

<img id="progress" src="http://ajaxify.com/run/sum/progress/progress.gif" class="notWaiting"/>

传统的 JavaScript 方式，代码工作：

function submitWord() {
    // Show progress indicator and clear existing results
    $("progress").classname="waiting";

但是在 jquery 方式下，下面的代码不起作用：

function submitWord() {

 // Show progress indicator and clear existing results
  $("#progress").toggleClass("notWaiting waiting");

另外，我已经尝试过addClass，甚至做了类似的事情

$("#progress").removeClass().addClass("waiting");

只是为了确保首先删除默认类，但也无济于事。

更新：这里是 JSfiddle 版本。 http://jsfiddle.net/EVbh2/1/

更新 2：
现在上面的问题是我引用 JQuery 文件本身。但我仍然面临代码问题。我尝试将所有代码转换为 jquery，但它不起作用。这是一个新的FIDDLE。

4

3 回答 3

2

这有效：

$("#progress").removeClass("notWaiting").addClass("waiting");

这也可以，但它会清除所有其他类，并且唯一的类将是“等待”：

$("#progress").attr("class","waiting");

这也将起作用，并且可能是最简单的：

$("#progress").toggleClass("notWaiting waiting");

更新

看了你的小提琴之后，你的问题实际上是你忘记在你的“单词”选择器中放一个#。我还更改了您的 keyup 函数以使用 jquery 等效项。

这有效：

http://jsfiddle.net/wuXL2/3/

于 2012-05-23T20:10:21.893 回答
0

Your jsFiddle demo is not correct jQuery code. In jQuery, the $ returns a jQuery object, not a DOM element. Because of this, you can't set properties the same way. So you cannot do this:

$("word").onkeyup = function(){
};

You need to call the keyup method:

$('#word').keyup(function(){  // Note the '#'
});

Also:

$("results").innerHTML = "";

Should be:

$("#results").html("");  // Note the '#'

As for changing classes:

$("#progress").toggleClass("notWaiting waiting");

This is correct, and works 100% in jQuery. If it doesn't work, then something else is wrong (like the incorrect jQuery code, and the fact that your jsFiddle had MooTools selected).

Fixed demo: http://jsfiddle.net/EVbh2/3/

于 2012-05-23T20:26:26.570 回答
0

问题出在 chrome 上。在 IE 中它工作得很好。

于 2012-05-26T17:12:59.410 回答