当前位置： 文江博客话题详情

jQuery onclick if then条件window.location.href问题

发布于 09-27 16:23 字数 16809 浏览 8 评论 0原文

好的，所以我正在尝试使用我在这里找到的一个很酷的图像加载器/画廊闪耀时光。

我想采用它来类似于我的主页上的产品查看器，您可以在其中查看我为其保留的空白区域。

现在，由于我需要将其调整为产品查看器，因此我希望有指向我正在预览的产品或服务的链接。

我在代码中创建了一个条件，您可以在下面看到我将在此处突出显示：

$('#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>

有什么想法吗？

原文

OK, so I'm trying a to use a cool image loader/gallery I found here called ShineTime.

I want to adopt it to resemble a product viewer on my homepage where 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 thumb1 element, a div containing my first small thumbnail, and if I then click on the largephoto div, 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:

<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?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

囍笑2024-10-04 16:23:41

这段代码：

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

...没有按照 jQuery 的预期使用。现在，这表示：“当我单击“thumb1”时，通过在“#largephoto”上调用 click() 来检查是否返回非空值。该 if 语句将始终为非值。 -null（因此它是true），这就是为什么您实际上是在以编程方式单击您的大照片链接，而不是等待它被单击

。听起来您正在尝试捕获一系列单击事件，您可能需要执行一些操作，例如在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';
    }
});

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.

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:

var thumbClicked = false;

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

$('#largephoto').click(function()
{
    if (thumbClicked)
    {
        window.location.href = 'http://www.marioplanet.com/product.asp?IDnum=1';
    }
});
回复 原文
沉溺在你眼里的海2024-10-04 16:23:41

首先尝试在所有拇指上使用类，例如 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
  };
})

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.

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
  };
})
回复 原文
~没有更多了~

关于作者

温柔嚣张

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

陪我终i

文章 0 评论 0

别忘他

文章 0 评论 0

野心澎湃

文章 0 评论 0

蒲公英的约定

文章 0 评论 0

。

文章 0 评论 0

旧时模样

文章 0 评论 0

更多

友情链接

文江博客
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
原文