jQuery onclick if window then.location.href problem

好的，所以我想要使用一個很酷的圖像加載器/庫我發現here叫做ShineTime。jQuery onclick if window then.location.href problem

我想採用它來模擬產品查看器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>

任何想法？

來源

2010-10-17 Qcom

此代碼：

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

...如jQuery的預期不被使用。現在，它說：「當我點擊'thumb1'時，通過在'#largephoto'上調用click()來檢查是否返回非null。if語句總是非空的（因此它是true），所以這就是爲什麼你被直接帶到你的鏈接，你實際上是通過編程的方式點擊你的largephoto鏈接，而不是等待它被點擊

這聽起來像你試圖捕捉一系列點擊。事件您可能需要做類似設置一個變量在你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'; 
    } 
});

來源

2010-10-17 20:11:29

謝謝！ – Qcom 2010-10-17 21:34:37

由於我要爲所有15個拇指執行此代碼，因此應該在＃thumb'nth'點擊函數內將每個其他變量設置爲false？ – Qcom 2010-10-17 21:37:16

在這種情況下，您可能希望設置一種讓您的拇指更具動感的方式。您是在服務器端生成縮略圖代碼還是在手動執行客戶端？ – 2010-10-17 23:55:33

嘗試首先使用在類的所有大拇指說CLAS S = 「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 
    }; 
})

來源

2012-06-26 23:23:27

jQuery onclick if window then.location.href problem

回答

相關問題