使用Javascript動態圖像點擊功能

我有一個朋友列表（BOB，TINA，LISA，TERRY，MIKE），並且每個列出的人都有一張圖標，標識他們在懸停狀態。當你點擊那個人時，他們的圖像會保留在屏幕上，直到你點擊不同的人。目前，無論我選擇哪個名稱，我都會點擊相同的人物圖片。使用Javascript動態圖像點擊功能

如何在js中創建動態點擊功能？當我點擊列出的朋友時，我希望點擊功能能夠識別我選擇哪個人並顯示與該人相關的圖像。

有人可以幫我嗎？

CSS

.BOB,.TINA,.LISA,.TERRY,.MIKE { background: url("../theme/images/blank.png") no-repeat 0 0; } 

.BOB:hover { background: url("../theme/images/BOB.png") no-repeat 0 0; } 
.TINA:hover { background: url("../theme/images/TINA.png") no-repeat 0 0; } 
.LISA:hover { background: url("../theme/images/LISA.png") no-repeat 0 0; } 
.TERRY:hover { background: url("../theme/images/TERRY.png") no-repeat 0 0; } 
.MIKE:hover { background: url("../theme/images/MIKE.png") no-repeat 0 0; } 

.highlight { background: url("../theme/images/BOB.png") no-repeat 0 0; display: block;}

JAVASCRIPT

$(document).ready(function(){ 
$('a').click(function(){ 
    $(".highlight").removeClass('highlight') 
    $(this).addClass('highlight'); 
});

來源

2011-12-24 need2nobasis

的.highlight類總是用他相同的圖像。

你能發佈html代碼嗎？沒有看到你的html代碼很難找出發生了什麼。

來源

2011-12-24 01:27:52 Virendra

這裏是我的問題的鏈接。當您將鼠標懸停在某個評分上時，您會看到懸停效果。我刪除了突出顯示代碼，因爲它有問題並且沒用。我試圖讓點擊時的評分保持不變。謝謝您的幫助。 [鏈接] http://cuuzo.com/language.html – need2nobasis 2011-12-24 03:18:57

我將你的代碼複製到jsfiddle並修改它。這是它的鏈接。 http://jsfiddle.net/c9Fxg/ 讓我知道如果這是你在找什麼。 – Virendra 2011-12-24 04:03:57

比我原來的要好很多。但是，只有選中的內容應該一次突出顯示。現在，當另一個被選中時，jsfiddle從不取消選擇該項目。 – need2nobasis 2011-12-24 04:44:58

你$(document).ready()功能無法正常關閉。
您的$("a").click()函數未阻止默認鏈接操作（如果您爲鏈接定義了href屬性，這只是一個問題）。
你的.highlight類有一個背景圖像，它與你的第一個人的背景圖像相同。這會導致您看到每個背景圖像都相同。

你可以做到這一點，以解決數3：

$("a").click(function(e){ 
    e.preventDefault(); // prevent link from directing to a different url 
    $(this) 
     .parent() // assuming the link is in the div you want to "highlight" 
     .css({ // modify parent's css 
      'background': 
       'url(../theme/images/' + $(this).attr("class") + '.png no-repeat 0 0', 
       // take class name (bob, tina, etc) and fetch image accordingly 
      'display': 'block' 
     }); 
});

來源

2011-12-24 01:26:07 Purag

使用Javascript動態圖像點擊功能

回答

相關問題