Question

我有一个朋友列表，（BOB，TINA，LISA，TERRY，MIKE），每个列出的人都有一张在悬停时识别它们的图片。当您单击该人时，他们的图像会保留在屏幕上，直到您单击其他人为止。目前无论我选择哪个名字，我都会在点击时获得相同的人物照片。

如何在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');
});

Answer 1

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

Answer 2

.highlight类总是使用相同的图像。

你也可以发布html代码吗？如果没有看到你的HTML代码，很难找到发生的事情。

使用Javascript动态图像点击功能

2 个答案: