JQuery不能正常工作

我正在嘗試使用JQuery中的.html()函數完成與文本的交換圖像。我有一些問題。JQuery不能正常工作

FIRST：

如果鼠標左右移動過快，功能被延遲並不起作用。 onHover甚至似乎卡在鼠標上，並且onmouse不會觸發。

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事件來淡入/淡出效果嗎？（使它更花哨）

第二：我知道有一種方法可以縮短上面的jQuery代碼，是因爲它做同樣的事，所有的TD它不會佔用這麼多的線路。如果可能，我將如何縮短代碼？

來源

2013-05-22 Si8

添加新圖像時，必須先加載才能顯示。這就是你的延遲。要解決這個問題，請使用圖像精靈，或者預加載圖像。 –

你可以使用css類來代碼重構你的代碼少於10行，而不是所有這些ID –

當頁面加載時，所有的圖像已經加載，不是？ – Si8

您還可以將圖像的alt文本中的語言名稱存儲（因此符合ADA）。然後，您可以爲您的td元素使用類選擇器，並用圖像替換替代文本。這對屏幕閱讀器仍然有好處。

編輯因爲您在使用鼠標的移動速度的問題，我會建議不要使用.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(); 
});

編輯：整理了答案，縮短wa並使用提問者的文檔選擇器。

來源

2013-05-22 16:23:34 XGundam05

您能否告訴我爲什麼會發生這種情況，如果我在圖像周圍移動鼠標的速度真的很快，替換圖像從來沒有踢過（鏈接：http：//www.interfaithmedical.com/checksite/au_language.php） – Si8

這是因爲部分原因因爲你實際上刪除了'img'標籤。它也似乎部分歸因於'懸停'被觸發的方式。當您快速移動鼠標時，不會觸發'hover'事件。在Chrome的控制檯中與你網站上的JS混淆，並使用'mouseenter'和'mouseleave'正常工作。 – XGundam05

我懷疑這一點。謝謝！我將如何採取什麼「未定義」編碼上面有mouseenter和mouseleave事件？ – Si8

$('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-22 15:55:54 undefined

我對你的代碼進行了一些編輯，這種編輯方式非常完美:) – Si8

在代碼轉換過程中是否可以包含FADE（）？ – Si8

@ SiKni8是的，我已經更新了答案。 – undefined

我會放棄到位CSS轉換的瀏覽器會處理這些對自己比你能有更好的JS使用JavaScript。如果您需要支持使用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-22 15:56:02

你可以給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-22 15:59:28

JQuery不能正常工作

回答

相關問題