jQuery onclick if then 条件 window.location.href 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3954942/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery onclick if then conditional window.location.href problem
提问by Qcom
OK, so I'm trying a to use a cool image loader/gallery I found herecalled ShineTime.
好的，所以我正在尝试使用我在此处找到的名为 ShineTime的酷图像加载器/图库。
I want to adopt it to resemble a product viewer on my homepagewhere you can view the blank space I have reserved for it.
我想采用它来类似于我主页上的产品查看器，您可以在其中查看我为它保留的空白空间。
Now, since I need to adapt it to be a product viewer, I would like to have links to products or services I'm previewing.
现在，由于我需要将其调整为产品查看器，因此我想要链接到我正在预览的产品或服务。
I have created a conditional in the code you can see below which I'll highlight here:
我在您可以在下面看到的代码中创建了一个条件，我将在此处突出显示：
$('#thumb1').click(function()
{
if($('#largephoto').click())
{
window.location.href = 'http://www.marioplanet.com/product.asp?IDnum=1';
}
else
{
}
});
As you can see, I'm trying to set it up to where I click on the thumb1element, a div containing my first small thumbnail, and if I then click on the largephotodiv, where my larger preview photo resides, then it will take me to the above link. For some reason, though, when I click on the thumbnail, it won't work correctly. It will take me directly to the link when I click on the thumbnail. I think it may be due to some of the jQuery code below, so I have included the full code here:
如您所见，我正在尝试将其设置为单击thumb1元素的位置，即包含我的第一个小缩略图的largephotodiv，然后如果我单击该div（我的较大预览照片所在的位置），它将带我到上面的链接。但是，出于某种原因，当我单击缩略图时，它无法正常工作。当我单击缩略图时，它会将我直接带到链接。我认为这可能是由于下面的一些 jQuery 代码，所以我在这里包含了完整的代码：
<html>
<head>
<title>ShineTime at AddyOsmani.com</title>
<link rel="stylesheet" type="text/css" href="styles.css"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<!--[if lt IE 7]>
<script defer type="text/javascript" src="js/pngfix.js"></script>
<![endif]-->
</head>
<script type="text/javascript">
$(document).ready(function()
{
/*Your ShineTime Welcome Image*/
var default_image = 'images/large/default.jpg';
var default_caption = 'Welcome to ShineTime';
/*Load The Default Image*/
loadPhoto(default_image, default_caption);
function loadPhoto($url, $caption)
{
/*Image pre-loader*/
showPreloader();
var img = new Image();
jQuery(img).load( function()
{
jQuery(img).hide();
hidePreloader();
}).attr({ "src": $url });
$('#largephoto').css('background-image','url("' + $url + '")');
$('#largephoto').data('caption', $caption);
}
/* When a thumbnail is clicked*/
$('.thumb_container').click(function()
{
var handler = $(this).find('.large_image');
var newsrc = handler.attr('src');
var newcaption = handler.attr('rel');
loadPhoto(newsrc, newcaption);
});
/*When the main photo is hovered over*/
$('#largephoto').hover(function()
{
var currentCaption = ($(this).data('caption'));
var largeCaption = $(this).find('#largecaption');
largeCaption.stop();
largeCaption.css('opacity','0.9');
largeCaption.find('.captionContent').html(currentCaption);
largeCaption.fadeIn()
largeCaption.find('.captionShine').stop();
largeCaption.find('.captionShine').css("background-position","-550px 0");
largeCaption.find('.captionShine').animate({backgroundPosition: '550px 0'},700);
Cufon.replace('.captionContent');
},
function()
{
var largeCaption = $(this).find('#largecaption');
largeCaption.find('.captionContent').html('');
largeCaption.fadeOut();
});
/* When a thumbnail is hovered over*/
$('.thumb_container').hover(function()
{
$(this).find(".large_thumb").stop().animate({marginLeft:-7, marginTop:-7},200);
$(this).find(".large_thumb_shine").stop();
$(this).find(".large_thumb_shine").css("background-position","-99px 0");
$(this).find(".large_thumb_shine").animate({backgroundPosition: '99px 0'},700);
}, function()
{
$(this).find(".large_thumb").stop().animate({marginLeft:0, marginTop:0},200);
});
function showPreloader()
{
$('#loader').css('background-image','url("images/interface/loader.gif")');
}
function hidePreloader()
{
$('#loader').css('background-image','url("")');
}
$('#thumb1').click(function()
{
if($('largephoto').click())
{
window.location.href = 'http://www.marioplanet.com/product.asp?IDnum=1';
}
else
{
}
});
});
</script>
<div id="container">
<div id="containertitle">
Welcome to ShineTime
</div>
<div class="mainframe">
<div id="largephoto">
<div id="loader"></div>
<div id="largecaption">
<div class="captionShine"></div>
<div class="captionContent"></div>
</div>
<div id="largetrans">
</div>
</div>
</div>
<div class="thumbnails">
<br><br><br>
<!-- start entry-->
<div id="thumb1" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage1.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage1.jpg" class="large_image" rel="Mario (Running) - Plush" />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb2" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage2.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage2.jpg" class="large_image" rel="Mushroom - Plush" />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb3" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage3.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage3.jpg" class="large_image" rel="I can't see through walls, but I can still kick your ass." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb4" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage4.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage4.jpg" class="large_image" rel="I won't bite, I promise!" />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb5" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage5.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage5.jpg" class="large_image" rel="Using swords to open up that ketchup bottle may not have been the best idea.." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb6" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage6.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage6.jpg" class="large_image" rel="We're going to..wait for it..kick your ass!" />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb7" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage7.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage7.jpg" class="large_image" rel="I can't be invisible, but I can kick your ass." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb8" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage8.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage8.jpg" class="large_image" rel="Dave Lizewski is a man in a green costume. He is Kick-Ass." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb9" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage9.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage9.jpg" class="large_image" rel="I probably shouldn't have yelled 'surprise' wearing this costume.." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb10" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage10.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage10.jpg" class="large_image" rel="I can't read your mind, but I can kick your ass." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb11" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage11.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage11.jpg" class="large_image" rel="I love that indented text effect up there. Not bad.." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb12" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage12.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage12.jpg" class="large_image" rel="I got your a present. It's an Ass-Kicking." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb13" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage13.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage13.jpg" class="large_image" rel="You don't have to be super to be a hero." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb14" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage15.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage15.jpg" class="large_image" rel="We Can Kick Ass - Anytime, Anyday." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div id="thumb15" class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/stimage14.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/stimage14.jpg" class="large_image" rel="You know..I had this look first. Batman copied ME." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
</div>
</div>
</html>
Any ideas?
有任何想法吗？
回答by C???
This code:
这段代码：
$('#thumb1').click(function()
{
if($('#largephoto').click())
{
window.location.href = 'http://www.marioplanet.com/product.asp?IDnum=1';
}
});
...isn't being used as jQuery intended. Right now, this says: "When I click on 'thumb1', check if something non-null is being returned by calling click()on '#largephoto'. That if-statement will always be non-null (thus it is true), so that's why you're being taken directly to your link. You're actually programmatically clicking on your largephoto link, not waiting for it to be clicked on.
...没有按照 jQuery 的意图使用。现在，它说：“当我点击 'thumb1' 时，通过调用 '#largephoto' 检查是否返回了非空值click()。该 if 语句将始终为非空值（因此是true），所以为什么你被直接带到你的链接。你实际上是以编程方式点击你的大照片链接，而不是等待它被点击。
It sounds like you're trying to capture a series of click events. You might have to do something like set a variable in your thumb1 click event, and then check it on the largephoto click event. Something like:
听起来您正在尝试捕获一系列点击事件。您可能需要执行一些操作，例如在您的 thumb1 单击事件中设置一个变量，然后在 largephoto 单击事件中检查它。就像是：
var thumbClicked = false;
$('#thumb1').click(function()
{
thumbClicked = true;
});
$('#largephoto').click(function()
{
if (thumbClicked)
{
window.location.href = 'http://www.marioplanet.com/product.asp?IDnum=1';
}
});
回答by Alex Reynolds
Try first using a class on all your thumbs say class="thumbclass". Obviously you'd need to tweak it but you can see we parse the ID for the product number, then the url can be dynamic. By using a common class we can make the click event work for all thumbs. Might need tweaking.
首先尝试在所有拇指上使用一个类，比如 class="thumbclass"。显然您需要对其进行调整，但您可以看到我们解析了产品编号的 ID，然后 url 可以是动态的。通过使用一个通用类，我们可以使点击事件适用于所有拇指。可能需要调整。
var str ='',
productID='';
$('.thumbclass').click(function(){
str = this.attr("id");
productID = str.match(/[0-9]/);
})
$('#largephoto').click(function(){
if(productID != ''){
window.location.href= 'http://www.marioplanet.com/product.asp?IDnum='+productID
};
})
