JQuery不能正常工作

Question

我正在使用JQuery中的.html()函数尝试使用文本完成交换图像。我有一些问题。

第一：

如果鼠标移动太快，则功能会延迟并且不起作用。 onHover甚至似乎卡在了鼠标上，并且onmouse out不会触发。

HTML：

<table border=0 cellPadding=2 cellSpacing=5 width=100% class=showlangs>
    <tr>
        <td id="arabic">
            <img src="theImages/languages/arabic.png" />
        </td>
        <td id="khmer">
            <img src="theImages/languages/khmer.png" />
        </td>
    </tr>
    <tr>
        <td id="armenian">
            <img src="theImages/languages/armenian.png" />
        </td>
        <td id="korean">
            <img src="theImages/languages/korean.png" />
        </td>
    </tr>
    <tr>
        <td id="bengali">
            <img src="theImages/languages/bengali.png" />
        </td>
        <td id="laotian">
            <img src="theImages/languages/laotian.png" />
        </td>
    </tr>
    <tr>
        <td id="cantonese">
            <img src="theImages/languages/cantonese.png" />
        </td>
        <td id="mandarin">
            <img src="theImages/languages/mandarin.png" />
        </td>
    </tr>
    <tr>
        <td id="english">
            <img src="theImages/languages/english.png" />
        </td>
        <td id="polish">
            <img src="theImages/languages/polish.png" />
        </td>
    </tr>
    <tr>
        <td id="french">
            <img src="theImages/languages/french.png" />
        </td>
        <td id="portugese">
            <img src="theImages/languages/portugese.png" />
        </td>
    </tr>
    <tr>
        <td id="german">
            <img src="theImages/languages/german.png" />
        </td>
        <td id="russian">
            <img src="theImages/languages/russian.png" />
        </td>
    </tr>
    <tr>
        <td id="hindi">
            <img src="theImages/languages/hindi.png" />
        </td>
        <td id="spanish">
            <img src="theImages/languages/spanish.png" />
        </td>
    </tr>
    <tr>
        <td id="hmong">
            <img src="theImages/languages/hmong.png" />
        </td>
        <td id="tagalog">
            <img src="theImages/languages/tagalog.png" />
        </td>
    </tr>
    <tr>
        <td id="italian">
            <img src="theImages/languages/italian.png" />
        </td>
        <td id="thai">
            <img src="theImages/languages/thai.png" />
        </td>
    </tr>
    <tr>
        <td id="japanese">
            <img src="theImages/languages/japanese.png" />
        </td>
        <td id="vietnamese">
            <img src="theImages/languages/vietnamese.png" />
        </td>
    </tr>
</table>

JQuery的：

$(document).ready(function() {

    $("#arabic").hover(function(){
        $("#arabic").html('<b class="langs">ARABIC</b>');
        },function(){
        $("#arabic").html('<img src="theImages/languages/arabic.png" />');
    });
    $("#armenian").hover(function(){
        $("#armenian").html('<b class="langs">ARMENIAN</b>');
        },function(){
        $("#armenian").html('<img src="theImages/languages/armenian.png" />');
    });
    $("#bengali").hover(function(){
        $("#bengali").html('<b class="langs">BENGALI</b>');
        },function(){
        $("#bengali").html('<img src="theImages/languages/bengali.png" />');
    });
    $("#cantonese").hover(function(){
        $("#cantonese").html('<b class="langs">CANTONESE</b>');
        },function(){
        $("#cantonese").html('<img src="theImages/languages/cantonese.png" />');
    });
    $("#english").hover(function(){
        $("#english").html('<b class="langs">ENGLISH</b>');
        },function(){
        $("#english").html('<img src="theImages/languages/english.png" />');
    });
    $("#french").hover(function(){
        $("#french").html('<b class="langs">FRENCH</b>');
        },function(){
        $("#french").html('<img src="theImages/languages/french.png" />');
    });
    $("#german").hover(function(){
        $("#german").html('<b class="langs">GERMAN</b>');
        },function(){
        $("#german").html('<img src="theImages/languages/german.png" />');
    });
    $("#hindi").hover(function(){
        $("#hindi").html('<b class="langs">HINDI</b>');
        },function(){
        $("#hindi").html('<img src="theImages/languages/hindi.png" />');
    });
    $("#hmong").hover(function(){
        $("#hmong").html('<b class="langs">HMONG</b>');
        },function(){
        $("#hmong").html('<img src="theImages/languages/hmong.png" />');
    });
    $("#italian").hover(function(){
        $("#italian").html('<b class="langs">ITALIAN</b>');
        },function(){
        $("#italian").html('<img src="theImages/languages/italian.png" />');
    });
    $("#japanese").hover(function(){
        $("#japanese").html('<b class="langs">JAPANESE</b>');
        },function(){
        $("#japanese").html('<img src="theImages/languages/japanese.png" />');
    });
    $("#khmer").hover(function(){
        $("#khmer").html('<b class="langs">KHMER</b>');
        },function(){
        $("#khmer").html('<img src="theImages/languages/khmer.png" />');
    });
    $("#korean").hover(function(){
        $("#korean").html('<b class="langs">KOREAN</b>');
        },function(){
        $("#korean").html('<img src="theImages/languages/korean.png" />');
    });
    $("#laotian").hover(function(){
        $("#laotian").html('<b class="langs">LAOTIAN</b>');
        },function(){
        $("#laotian").html('<img src="theImages/languages/laotian.png" />');
    });
    $("#mandarin").hover(function(){
        $("#mandarin").html('<b class="langs">MANDARIN</b>');
        },function(){
        $("#mandarin").html('<img src="theImages/languages/mandarin.png" />');
    });
    $("#polish").hover(function(){
        $("#polish").html('<b class="langs">POLISH</b>');
        },function(){
        $("#polish").html('<img src="theImages/languages/polish.png" />');
    });
    $("#portugese").hover(function(){
        $("#portugese").html('<b class="langs">PORTUGESE</b>');
        },function(){
        $("#portugese").html('<img src="theImages/languages/portugese.png" />');
    });
    $("#russian").hover(function(){
        $("#russian").html('<b class="langs">RUSSIAN</b>');
        },function(){
        $("#russian").html('<img src="theImages/languages/russian.png" />');
    });
    $("#spanish").hover(function(){
        $("#spanish").html('<b class="langs">SPANISH</b>');
        },function(){
        $("#spanish").html('<img src="theImages/languages/spanish.png" />');
    });
    $("#tagalog").hover(function(){
        $("#tagalog").html('<b class="langs">TAGALOG</b>');
        },function(){
        $("#tagalog").html('<img src="theImages/languages/tagalog.png" />');
    });
    $("#thai").hover(function(){
        $("#thai").html('<b class="langs">THAI</b>');
        },function(){
        $("#thai").html('<img src="theImages/languages/thai.png" />');
    });
    $("#vietnamese").hover(function(){
        $("#vietnamese").html('<b class="langs">VIETNAMESE</b>');
        },function(){
        $("#vietnamese").html('<img src="theImages/languages/vietnamese.png" />');
    });
});

所以假设发生的事情是，例如： 如果我将鼠标悬停在阿拉伯图像上，它应该用“ARABIC”文本替换图像，如果我将鼠标移出，它应该用图像替换文本。但是如果我在所有TD周围移动鼠标太快，一些onmouseout就不会发射。 我也可以使用onmouseover和onmouseout事件获得淡入/淡出效果吗？ （使它更加花哨）

SECOND ： 我知道有一种方法可以缩短上面的JQuery代码，因此它不会占用太多行，因为它对所有TD都做同样的事情。如果可能的话，我如何缩短代码？

Answer 1

$('table.showlangs td').hover(function() {
     this.innerHTML = '<b class="langs">'+ this.id.toUpperCase() +'</b>';
 , function() {
     this.innerHTML = '<img src="theImages/languages/'+ this.id +'.png"/>';
});

使用fadeIn和fadeOut方法：

$('table.showlangs td').hover(function() {
     var $this = $(this),
         content = $this.children('b').length
                   ? '<img src="theImages/languages/'+ this.id +'.png"/>'
                   : '<b class="langs">'+ this.id.toUpperCase() +'</b>';
     $this.fadeOut('fast', function() {
         $this.html(content).fadeIn('fast');
     })   
});

Answer 2

我会放弃使用JavaScript代替CSS转换，因为浏览器将比使用JS更好地处理这些转换。如果您需要使用IE9支持转换，这将无法正常工作，但显示/隐藏仍然有效。

td strong, td img {
    transition: opacity .5s;
}
strong {
    opacity: 0;
}
td:hover img {
    opacity: 0;
}
td:hover strong {
    opacity: 1;
}

http://jsfiddle.net/sgjqZ/1/

Answer 3

您可以像

一样为您的表格提供ID

<table id="myTable" border=0 cellPadding=2 cellSpacing=5 width=100% class=showlangs> ...

然后您可以使用该Id挂钩事件

$("td", "#myTable").hover(function () {
    $(this).find("img").hide();
    $(this).find("b").show();
}, function () {
    $(this).find("img").show();
    $(this).find("b").hide();
});

.html（）更改DOM并加载可能需要时间的新图像，而应该包含对象但隐藏/显示它

<tr>
    <td id="arabic">
        <img src="theImages/languages/arabic.png" />
        <b class="langs" style="display: none;">ARABIC</b>
    </td>
    ...
</tr>

Answer 4

您还可以将语言名称存储在图像的替代文本中（因此符合ADA标准）。然后，您可以为td元素使用类选择器，并将alt文本替换为图像。这样做的好处仍然是对屏幕阅读器友好。

编辑由于您遇到鼠标移动速度问题，我建议您不要使用.fadeIn和.fadeOut查看下面的替代javascript。

所以，类似于以下(and Fiddle)：

<强>使用Javascript / jQuery的

$(document).on('mouseenter', '.showlangs td', function(event){
    var _img = $(this).find('img');
    var _lang = $(_img).prop('alt');
    $(this).append('<span class="hidden"><strong>' + _lang + '</strong></span>');
    var _txt = $(this).find('span');
    $(_img).fadeOut();
    $(_txt).fadeIn();
});

$(document).on('mouseleave', '.showlangs td', function(event){
    $(this).find('img').fadeIn();
    $(this).find('span').fadeOut(function(){
        $(this).remove();
    });
});

替代Javascript / jQuery

$(document).on('mouseenter', '.showlangs td', function(event){
    var _img = $(this).find('img');
    $(_img).hide();
    $(this).append('<b>' + $(_img).prop('alt') + '</b>');
});

$(document).on('mouseleave', '.showlangs td', function(event){
    $(this).find('b').remove();
    $(this).find('img').show();
});

编辑：清理答案以缩短代码墙并使用提问者的文档选择器。