我不是jQuery专家,但我正在学习.我正在使用一些(增长到很多)jQuery来隐藏一些图像并在点击拇指时显示单个图像.虽然这一点jQuery工作,但它的效率非常低,但我不确定如何将其简化为更普遍的工作.
<script>
$(document).ready(function () {
// Changing the Materials
$("a#shirtred").click(function () {
$("#selectMaterials img").removeClass("visible");
$("img.selectShirtRed").addClass("visible");
});
$("a#shirtgrey").click(function () {
$("#selectMaterials img").removeClass("visible");
$("img.selectShirtGrey").addClass("visible");
});
$("a#shirtgreen").click(function () {
$("#selectMaterials img").removeClass("visible");
$("img.selectShirtGreen").addClass("visible");
});
$("a#shirtblue").click(function () {
$("#selectMaterials img").removeClass("visible");
$("img.selectShirtBlue").addClass("visible");
});
// Changing the Collars
$("a#collarred").click(function () {
$("#selectCollar img").removeClass("visible");
$("img.selectCollarRed").addClass("visible");
});
$("a#collargrey").click(function () {
$("#selectCollar img").removeClass("visible");
$("img.selectCollarGrey").addClass("visible");
});
$("a#collargreen").click(function () {
$("#selectCollar img").removeClass("visible");
$("img.selectCollarGreen").addClass("visible");
});
$("a#collarblue").click(function () {
$("#selectCollar img").removeClass("visible");
$("img.selectCollarBlue").addClass("visible");
});
// Changing the Cuffs
$("a#cuffred").click(function () {
$("#selectCuff img").removeClass("visible");
$("img.selectCuffRed").addClass("visible");
}); …我正在开发一个网站(烟草相关),要求所有访问者在他们可以查看该网站之前验证他们已超过18岁.我有一个确认年龄的表格,但我已经死路一条.我如何使用它来存储他们通过测试的cookie并检查所有页面以查看是否已通过此检查？任何建议和帮助将非常感谢!以下是我的验证表格:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Validate</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script language="javascript">
function checkAge()
{
var min_age = 18;
var year = parseInt(document.forms["age_form"]["year"].value);
var month = parseInt(document.forms["age_form"]["month"].value) - 1;
var day = parseInt(document.forms["age_form"]["day"].value);
var theirDate = new Date((year + min_age), month, day);
var today = new Date;
if ( (today.getTime() - theirDate.getTime()) < 0) {
alert("You are too young to enter this site!");
return false;
}
else {
return …嘿伙计.当我选择各种类别时,我正在使用一点点jQuery对我的投资组合进行实时排序.基本上,脚本将<li>click(我的菜单)上的<li>标签内容与页面上其他位置的其他标签的类名进行匹配.结果是投资组合项目与点击的导航匹配将显示并隐藏其余项目.实时排序.但是,我想添加一个永久链接来激活jquery的功能,以便在末尾按主题标签进行排序.例如:work.html#category1会自动设置脚本以隐藏除类别1之外的所有内容.我的脚本和基本页面设置如下.任何帮助将不胜感激!
<script>
$(document).ready(function() {
$('#worknavwrap p a').click(function() {
$(this).css('outline','none');
$('ul#worknavwrap .current').removeClass('current');
$(this).parent().addClass('current');
var filterVal = $(this).text().toLowerCase().replace(' ','_');
if(filterVal == 'all') {
$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
} else {
$('ul#portfolio li').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
});
</script>
<ul id="worknavwrap">
<li><a href="#category1">Category 1</a></li>
<li><a href="#category2">Category 2</a></li>
<li><a href="#category3">Category 3</a></li>
</ul>
<ul id="portfolio">
<li class="category1">Item 1</li>
<li class="category1">Item 2</li>
<li class="category2">Item 3</li>
<li class="category1">Item 4</li>
<li class="category3">Item 5</li>
<li …嘿所有,我有一个4个缩略图的列表.当点击其中一个缩略图时,我希望它的更大的合作伙伴形象向旁边展示.一次只能显示一个较大的图像.就像现在一样,我将所有4个较大的图像堆叠在一起,并在#1图像上设置了z-index,因此它默认位于堆栈顶部.我认为实现这一目标的最佳方法是,当点击一个拇指时,所有图像上的z-index都设置为0,而伙伴更大的图像z-index设置为更高的数字？
通过jQuery执行此操作的最简单方法是什么？我相信我能找到一些功能齐全的画廊插件来做到这一点,但这看起来有点矫枉过正,你知道吗？谢谢你的任何建议.我目前的HTML发布如下:
<style>
#productimagewrap {
position:absolute;
height:350px;
}
#productimagewrap img {
position:absolute;
left:0;
top:0;
}
</style>
<div class="moreimages">
<a ahref="#" id="productthumb1">
<img src="/images/products/ring1-product_thumb.jpg" />
</a>
<a ahref="#" id="productthumb2">
<img src="/images/products/ring2-product_thumb.jpg" />
</a>
<a ahref="#" id="productthumb3">
<img src="/images/products/ring3-product_thumb.jpg" />
</a>
<a ahref="#" id="productthumb4">
<img src="/images/products/ring4-product_thumb.jpg" />
</a>
</div>
<div id="productimagewrap">
<a href="/images/products/ring1-large.jpg" class="jqzoom" id="productimage1">
<img src="/images/products/ring1-product.jpg" alt="Amber Ring" style="z-index:99;" />
</a>
<a href="/images/products/ring2-large.jpg" class="jqzoom" id="productimage2">
<img src="/images/products/ring2-product.jpg" alt="Amber Ring" />
</a>
<a href="/images/products/ring3-large.jpg" class="jqzoom" id="productimage3">
<img src="/images/products/ring3-product.jpg" alt="Amber Ring" />
</a> …