Question

好的，所以我正在尝试使用一个很酷的图像加载器/图库，我发现here名为ShineTime。

我想将其用作类似于my homepage上的产品查看器，您可以在其中查看我为其保留的空白区域。

现在，由于我需要将其作为产品查看器进行调整，我希望能够链接到我正在预览的产品或服务。

我在下面的代码中创建了一个条件，我将在这里强调：

$('#thumb1').click(function()
     {
       if($('#largephoto').click())
       {
         window.location.href = 'http://www.marioplanet.com/product.asp?IDnum=1';
        }
        else
        {
        }
     });

正如您所看到的，我正在尝试将其设置为我点击thumb1元素的位置，这是一个包含我的第一个小缩略图的div，如果我然后点击largephoto 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>

有什么想法吗？

Answer 1

此代码：

$('#thumb1').click(function()
{
    if($('#largephoto').click())
    {
        window.location.href = 'http://www.marioplanet.com/product.asp?IDnum=1';
    }
});

...没有被用作jQuery。现在，这说：“当我点击'thumb1'时，通过调用'#largephoto'上的click()来检查是否返回了非null。那if语句将始终为非null（因此它是true），这就是为什么你被直接带到你的链接。你实际上是以编程方式点击你的大照片链接，而不是等待它被点击。

听起来您正在尝试捕获一系列点击事件。您可能需要执行诸如在thumb1单击事件中设置变量之类的操作，然后在bigphoto单击事件上进行检查。类似的东西：

var thumbClicked = false;

$('#thumb1').click(function()
{
    thumbClicked = true;
});

$('#largephoto').click(function()
{
    if (thumbClicked)
    {
        window.location.href = 'http://www.marioplanet.com/product.asp?IDnum=1';
    }
});

Answer 2

首先尝试使用所有拇指上的类，然后说class =“thumbclass”。显然你需要调整它，但你可以看到我们解析产品编号的ID，然后网址可以是动态的。通过使用公共类，我们可以使click事件适用于所有拇指。可能需要调整。

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
  };
})

jQuery onclick如果那么条件window.location.href问题

2 个答案: