使用jquery更改悬停的src
使用jquery更改悬停的src
提问于 2011-10-21 15:28:17
我需要关闭默认的悬停状态。我有下面的代码。
$(this).attr("id");
if ((this.id == "defaultTab") ){
$(img#defaultTab)[0].src.replace("_on","_off");
},如果“这个”悬停有一个DefaultTab的id，那么我告诉代码，然后取defaultTabs图像src并替换它。
这让我又犯了错误。
请帮帮忙。
谢谢
我正在张贴我的全部职能，以供审查。正在发生的事情是，"defaultTab“似乎并不是作为一个对象存在于我的src中。
// ************** TABs ********************//
jQuery.preloadImages = function()
{
for(var i = 0; i<arguments.length; i++)
{
jQuery("<img>").attr("src", arguments[i]);
}
}
// preload images first (can run before page is fully loaded)
$.preloadImages("images/tabs01_off.jpg", "images/tabs01_on.jpg", "images/tabs02_off.jpg","images/tabs02_on.jpg","images/tabs03_off.jpg","images/tabs03_on.jpg","images/tabs04_off.jpg","images/tabs04_on.jpg","images/tabs05_off.jpg","images/tabs05_on.jpg","images/tabs06_off.jpg","images/tabs06_on.jpg","images/tabs07_off.jpg","images/tabs07_on.jpg","images/17.jpg","images/22.jpg","images/24.jpg","images/28.jpg","images/30.jpg","images/31.jpg","images/38.jpg" );
$(
function()
{
// set up rollover -- this controls the hover states
$("img.rollover").hover(
function()
{
var image_id=$(this).attr("data-image"); // created a variable, making this an Jquery wrapped object.
this.src = this.src.replace("_off","_on");
$('#changeImg').css("background-image", "url(images/"+ image_id +'.jpg)');
$("#default_img").hide();
$(this).attr("id");
if (!(this.id == "defaultTab") ){
document.getElementById("defaultTab");
console.log();
$(this.id)[0].src.replace("_on","_off");
console.log('img.defaultTab');
}
},
function()
{
this.src = this.src.replace("_on","_off");
}
);
})
我的html文章是：
<tr>
<td> </td>
<td width="629"><img src="images/tabs01_on.jpg" class="rollover" data-image="28" width="89" height="55" id="defaultTab" /><img src="images/tabs02_off.jpg" class="rollover" data-image="24" width="91" height="55" /><img src="images/tabs03_off.jpg" class="rollover" data-image="30" width="90" height="55" /><img src="images/tabs04_off.jpg" class="rollover" data-image="22" width="89" height="55" /><img src="images/tabs05_off.jpg" class="rollover" data-image="17" width="91" height="55" /><img src="images/tabs06_off.jpg" class="rollover" data-image="38" width="90" height="55" /><img src="images/tabs07_off.jpg" class="rollover" data-image="31" width="90" height="55" /></td>
</tr>回答 4
Stack Overflow用户
回答已采纳
发布于 2011-10-21 15:33:33
当您正在悬停时，下面的代码将用_off替换_on，而当您没有悬停时，将用_off替换_on。
如果您在另一个选项卡上悬停，则关闭默认值，如果没有悬停，则默认设置为on。
$('.rollover').not('#defaultTab').hover(function(){
$(this).attr('src',$(this).attr('src').replace("_off","_on"));
$('#defaultTab').attr('src',$('#defaultTab').attr('src').replace("_on","_off"));
},function(){
$(this).attr('src',$(this).attr('src').replace("_on","_off"));
$('#defaultTab').attr('src',$('#defaultTab').attr('src').replace("_off","_on"));
});如果您想让最后一个人停留在“on”而不是默认的“on”上，那么您可以使用以下选项：
$('.rollover').hover(function(){
var hovered = $(this); // save the element we hovered on to use below.
$('.rollover').each(function(){
var tab = $(this); // $(this) in here is each tab as we go through all of them, not the one we hovered on
tab.attr('src',tab.attr('src').replace("_on","_off")); // Turn off ALL tabs.
}
hovered.attr('src',hovered.attr('src').replace("_off","_on")); // Turn on the tab we hovered on
},function(){ return false; });Stack Overflow用户
发布于 2011-10-21 15:30:50
更新：现在已经完全理解了问题，下面是我的建议：
您可以搜索图像，该图像在其_on属性中包含src (请参阅)并更改值。例如(只包括有关守则)：
function toggle(element, on) {
var from = on ? '_off' : '_on',
to = on ? '_on' : '_off';
element.attr('src', function(i, src) {
return src.replace(from, to);
});
}
$("img.rollover").hover(function(){
toggle($('img.rollover[src*="_on"]'), false);
toggle($(this), true);
}, function() {
toggle($(this), false);
});然后，您甚至不需要用ID标记默认图像。
我不太明白你用defaultTabs图像是什么意思。如果this引用了图像，那么您可以简单地做如下操作：
if (this.id === "defaultTab"){
this.src = this.src.replace("_on","_off");
}另一方面，如果图像是this的后代，则必须使用find
if (this.id == "defaultTab"){
$(this).find('img').attr(src, function(i, value) {
return value.replace("_on","_off");
});
}注意，同一个ID只能分配给一个元素，而不能分配给多个元素。
Stack Overflow用户
发布于 2011-10-21 15:33:53
你不能使用.src，你需要使用.attr('src',new_href)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7851686
复制相关文章
相似问题
腾讯云开发者
