jQuery onclick если тогда проблема условного window.location.href - PullRequest
Новая
       13

jQuery onclick если тогда проблема условного window.location.href

0 голосов
/ 17 октября 2010

ОК, поэтому я пытаюсь использовать крутой загрузчик / галерею изображений, которые я нашел здесь с именем ShineTime.

Я хочу использовать его в качестве средства просмотра продукта на моей домашней странице , где вы можете просмотреть пустое пространство, зарезервированное для него.

Теперь, поскольку мне нужно настроить его для просмотра продуктов, я хотел бы иметь ссылки на продукты или услуги, которые я предварительно просматриваю.

Я создал условие в коде, который вы можете увидеть ниже, и выделю его здесь: 

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

Есть идеи?

Ответы [ 2 ]

3 голосов
/ 18 октября 2010

Этот код: 

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

... не используется по назначению jQuery.Прямо сейчас, это говорит: «Когда я нажимаю на« thumb1 », проверьте, возвращается ли что-то ненулевое, вызывая click() на« #largephoto ». Этот оператор if всегда будет ненулевым (таким1005 *), поэтому вы попадаете прямо на свою ссылку. На самом деле вы программно нажимаете на ссылку большого фото, а не ждете, когда на нее нажмут.

Похоже, вы пытаетесьчтобы захватить серию событий щелчка. Вам может потребоваться сделать что-то вроде установки переменной в событии щелчка большого пальца, а затем проверить ее в событии щелчка большого фото. Что-то вроде: 

var thumbClicked = false;

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

$('#largephoto').click(function()
{
    if (thumbClicked)
    {
        window.location.href = 'http://www.marioplanet.com/product.asp?IDnum=1';
    }
});
0 голосов
/ 27 июня 2012

Попробуйте сначала использовать класс на всех пальцах, скажем class = "thumbclass".Очевидно, вам нужно настроить его, но вы можете видеть, что мы анализируем идентификатор для номера продукта, тогда 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
  };
})
...