j查询悬停和选定的问题
jquery hover and selected issue
http://www.kars4kids.org/charity/v2/nirangahtml/program_pop/meet_animals.asp
上面的链接,当我选择下面的图标之一时。它更改为选定的状态,但问题是我需要限制悬停效果并进一步选择该图标。(因为我正在使用图像更改(。
下面是我的完整 jquery 代码。
$(document).ready(function(){
$('#animal_content_text_horse').css("display", "block");
$('#animal_pic_horse_span').css("display", "block");
$('#page_animal_img_horse').css("display", "block");
$('.animal_thumb_link').each(function() {
$(this).click(function(e) {
e.preventDefault();
default_set($(this).attr('id'));
$(".animal_thumb_link").removeClass("thumbselected");
$(this).addClass("thumbselected");
$(".animal_thumb_link").find('img').addClass("imgHoverable");
$(this).find('img').removeClass("imgHoverable");
});
});
// Change the image of hoverable images
$(".imgHoverable").hover( function() {
var hoverImg = HoverImgOf($(this).attr("src"));
$(this).attr("src", hoverImg).hide().fadeIn(0);
}, function() {
var normalImg = NormalImgOf($(this).attr("src"));
$(this).attr("src", normalImg).show();
}
);
function HoverImgOf(filename)
{
var re = new RegExp("(.+)''.(gif|png|jpg)", "g");
return filename.replace(re, "$1_r.$2");
}
function NormalImgOf(filename)
{
var re = new RegExp("(.+)_r''.(gif|png|jpg)", "g");
return filename.replace(re, "$1.$2");
}
});
function default_set(obj12){
var arr = ["horse_content", "camel_content", "peacock_content", "goat_content", "donkey_content", "rooster_content", "sheep_content", "alpacas_content", "cynthia_content", "rabbit_content", "cow_content"];
var arr2 = ["../images/horse_thumb.gif", "../images/camel_thumb.gif", "../images/peacock_thumb.gif", "../images/goat_thumb.gif", "../images/donkey_thumb.gif", "../images/rooster_thumb.gif", "../images/sheep_thumb.gif", "../images/alpacas_thumb.gif", "../images/cynthia_thumb.gif", "../images/rabbit_thumb.gif", "../images/cow_thumb.gif"];
for ( var i = 0; i <= arr.length; i++ ) {
if ( arr[ i ] === obj12 ) {
old_url = $("#" + obj12).children('img').attr('src');
new_url = old_url.replace(/thumb/,'thumb_r');
$("#" + obj12).children('img').attr('src',new_url);
}else{
$('#' +arr[ i ]).children('img').attr('src',arr2[ i ]);
}
}
}
function load_page(obj1,obj2,obj3){
/* detect current div if so hide */
current_pagepharadiv = document.getElementById("pagepharadiv_hidden").value;
current_pageheadertext = document.getElementById("pageheadertext_hidden").value;
current_pageimage = document.getElementById("pageimage_hidden").value;
$('#' + current_pagepharadiv).css("display", "none");
$('#' + current_pageheadertext).css("display", "none");
$('#' + current_pageimage).css("display", "none");
image_hover(obj1);
image_hover(obj2);
$('#' + obj3).fadeIn("fast");
//image_hover(obj3);
//$('#' + obj1).fadeIn("fast");
//$('#' + obj2).fadeIn("fast");
document.getElementById("pagepharadiv_hidden").value = obj1;
document.getElementById("pageheadertext_hidden").value = obj2;
document.getElementById("pageimage_hidden").value = obj3;
}
你能建议伙计们吗,干杯!
在我看来
,你真的让事情变得比他们需要的更复杂。以下是我将如何实现该页面:
- 底部方块作为div,使图像透明png
- 使用 css 更改底部方块颜色:悬停
- 在服务器上为div中的每个动物生成整个热门内容:因此您有一个接一个的11个div,而不必在3个地方隐藏/显示东西。在下面的代码示例中,我假设它们具有类
animal-content
- 将每个顶级div 的 id 作为 html5 数据属性添加到相应的拇指链接
这样,在jQuery中你需要做的就是:
$(".animal_thumb_link").click(function() {
var topId = $(this).data("topId");
$(".animal_thumb_link").removeClass("thumbselected");
$(this).addClass("thumbselected");
$(".animal-content").toggle(function() { return this.id === topId; });
});
相关文章:
- 捕获初始RedQueryBuilder查询中的SQL问题
- 解析.查询和组合问题
- j查询键盘问题上的事件
- 问题 - 在查询加载器 2 加载页面之前显示 1 秒的页面
- j查询网站标题问题
- Ajax发布到PHP脚本,每5秒查询一次MySQL数据库的性能/问题
- j查询模式窗口,刷新父问题
- j查询齿轮旋转问题
- 插入查询中的问题--sqlite Phonegap
- 对jQuery使用setTimeout()是否有任何问题;媒体查询“;类型情况
- 使用jquery从URL中删除查询字符串(处理问题)
- 解析云代码-在“”中查询用户问题;正常的“;作用
- mongoose中嵌套查询执行的问题
- j查询淡入和淡出问题
- 从 MongoDB 打印查询时出现问题
- 在调用 ajax 和查询数据库时遇到问题
- j查询滑块导航问题
- 删除导致页面刷新出现问题的查询参数
- j查询日历操作问题
- 更新的问题::查询选择器可能存在PhantomJS/Javascript问题