0

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

第一：

如果鼠标移动得太快，该功能就会延迟并且不起作用。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>

查询：

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

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

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

4

4 回答 4

3 
$('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');
     })   
});
于 2013-05-22T15:55:54.553 回答
3

我会放弃使用 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/

于 2013-05-22T15:56:02.087 回答
1

您可以将 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>
于 2013-05-22T15:59:28.070 回答
1

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

编辑因为您在鼠标移动速度方面遇到问题，我建议您不要使用.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();
    });
});

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

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

于 2013-05-22T16:23:34.643 回答