JQuery无法正常工作

我正在尝试使用JQuery中的

.html（）

函数实现图像与文本的交换。我有一些问题

首先：

如果鼠标移动过快，则该功能会延迟且不起作用。onHover甚至似乎卡在了鼠标上，onmouse out没有启动

HTML:

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" />');
    });
});

$（文档）.ready（函数（）{
$（“#阿拉伯语”）.hover（函数（）{
$（“#阿拉伯语”）.html（‘阿拉伯语’）；
}，函数（）{
$（“#阿拉伯语”）.html（“”）；
});
$（“#亚美尼亚”）.hover（函数（）{
$（“#亚美尼亚语”）.html（‘亚美尼亚语’）；
}，函数（）{
$（“#亚美尼亚”）.html（“”）；
});
$（“#孟加拉语”）.hover（函数（）{
$（“#孟加拉文”）.html（‘孟加拉文’）；
}，函数（）{
$（“#孟加拉语”）.html（“”）；
});
$（“#粤语”）.hover（函数（）{
$（“#粤语”）.html（‘粤语’）；
}，函数（）{
$（“#粤语”）.html（“”）；
});
$（“#英语”）.hover（函数（）{
$（“#英语”）.html（'english'）；
}，函数（）{
$（“#英语”）.html（“”）；
});
$（“#法语”）.hover（函数（）{
$（“#法语”）.html（‘法语’）；
}，函数（）{
$（“#法语”）.html（“”）；
});
$（“#德语”）.hover（函数（）{
$（“#德语”）.html（‘德语’）；
}，函数（）{
$（“#德语”）.html（“”）；
});
$（“#印地语”）.hover（函数（）{
$（“#印地语”）.html（‘印地语’）；
}，函数（）{
$（“#印地语”）.html（“”）；
});
$（“#苗族”）.hover（函数（）{
$（“#hmong”）.html（'hmong'）；
}，函数（）{
$（“#苗族”）.html（“”）；
});
$（“#意大利语”）.hover（函数（）{
$（“#意大利语”）.html（‘意大利语’）；
}，函数（）{
$（“#意大利语”）.html（“”）；
});
$（“#日语”）.hover（函数（）{
$（“#日语”）.html（‘日语’）；
}，函数（）{
$（“#日语”）.html（“”）；
});
$（“#高棉”）.hover（函数（）{
$（“#高棉”）.html（‘高棉’）；
}，函数（）{
$（“#高棉”）.html（“”）；
});
$（“#韩语”）.hover（函数（）{
$（“#韩语”）.html（‘韩语’）；
}，函数（）{
$（“#韩语”）.html（“”）；
});
$（“#老挝”）.hover（函数（）{
$（“#老挝”）.html（'laotian'）；
}，函数（）{
$（“#老挝”）.html（“”）；
});
$（“#普通话”）.hover（函数（）{
$（“#普通话”）.html（‘普通话’）；
}，函数（）{
$（“#普通话”）.html（“”）；
});
$（“#波兰”）.hover（函数（）{
$（“#波兰文”）.html（‘波兰文’）；
}，函数（）{
$（“#波兰语”）.html（“”）；
});
$（“#葡萄牙语”）.hover（函数（）{
$（“#葡萄牙语”）.html（‘葡萄牙语’）；
}，函数（）{
$（“#葡萄牙语”）.html（“”）；
});
$（“#俄语”）.hover（函数（）{
$（“#俄语”）.html（‘俄语’）；
}，函数（）{
$（“#俄语”）.html（“”）；
});
$（“#西班牙语”）.hover（函数（）{
$（“#西班牙语”）.html（‘西班牙语’）；
}，函数（）{
$（“#西班牙语”）.html（“”）；
});
$（“#tagalog”）.hover（函数（）{
$（“#tagalog”）.html（'tagalog'）；
}，函数（）{
$（“#tagalog”）.html（“”）；
});
$（“#泰语”）.hover（函数（）{
$（“#泰语”）.html（‘泰语’）；
}，函数（）{
$（“#泰语”）.html（“”）；
});
$（“#越南语”）.hover（函数（）{
$（“#越南语”）.html（‘越南语’）；
}，函数（）{
$（“#越南语”）.html（“”）；
});
});

因此，假设发生的情况是，例如： 如果我将鼠标悬停在阿拉伯文图像上，它将用“阿拉伯文”文本替换图像，如果我将鼠标移出，它将用图像替换文本。但是，如果我在所有TD上移动鼠标太快，一些onmouseout不会启动。 我还可以在onmouseover和onmouseout事件中使用淡入/淡出效果吗？（让它更别致）

秒：

---

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

我将放弃使用JavaScript代替CSS转换，因为浏览器将比使用JS更好地自行处理这些转换。如果您需要支持IE9-的转换，那么这将不会真正起作用，但是显示/隐藏仍然会起作用

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

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

---

您可以像这样为您的表提供Id

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

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

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

阿拉伯文
...

您还可以将语言名称存储在图像的alt文本中（因此符合ADA）。然后可以为

td

元素使用类选择器，并将alt文本与图像交换。这样做的好处是仍然对屏幕阅读器友好

编辑因为您的鼠标移动速度有问题，我建议不要使用

.fadeIn

和

.fadeOut

查看下面的备选javascript

因此，类似于以下内容：

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();
    });
});

$(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();
});

$（文档）.on（'mouseenter'，'showlangs td'，函数（事件）{
var_im
<tr>
    <td id="arabic">
        <img src="theImages/languages/arabic.png" />
        <b class="langs" style="display: none;">ARABIC</b>
    </td>
    ...
</tr>

$(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();
    });
});

$(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();
});