0

Ok, sorry if I am misunderstanding, or misinterpreting, anything, but I am fairly new to jQuery and javascript.

I have built a shop in php, and one of the elements is a jQuery cart that is 'required' in all pages so its always on page. The jQuery I include on page to make it work is as follows:

$(document).ready(function(){
    $("#cbox").hover(function(){ 

         $(this).stop(true,false)
         .animate({right:  0}, 500); },
         function(){               

            $("#cbox").stop(true,false).animate({right: -120}, 500); });
    });

Basically the cart sits on the right side of the page, and on hover pops/slides out.

I would like to make it programmatically pop/slide out when the user adds an item to the basket, as a sort of notification of the event. Ideally using onclick.

I have tried calling various parts, but as its a on document ready overall function, I am struggling as to what my onclick should say. Am am not even sure if it will work.

Can anyone give me a point in the right direction please?

4

2 に答える 2

1 
$(document).ready(function(){
    $("#cbox").hover(function()
    { 

         $(this).stop(true,false)
                //.animate({right:  0}, 500); },function()<-- invalid syntax: leave out parentheses and semi-colon:
                .animate({right:  0}, 500,function()
                {//no need for the selecot here
                    $(this).stop(true,false).animate({right: -120}, 500);
                });
    });
    $('.storeItems').on('click',function()
    {//best use on for AJAX content, for example
        $('#cbox').trigger('hover');/
    });
 });//you were missing this closing

私がしたい提案が1つあります.on('click'。ハンドラーにはjQueryセレクターが含まれています。これは、クリックイベントごとにその#cbox要素のDOMをスキャンすることを意味します。ここでクロージャを使用すると、コードをより効率的にすることができます。

    $('.storeItems').on('click',(function(cbox)
    {
        return function()
        {//cbox is a reference to the cart element, in memory so no need to scan the dom over and over
            cbox.trigger('hover');
        };
    }($('#cbox'))));//pass the reference here

私は知っています、たくさんのfunction'sとさらに多くの括弧と括弧があります。このアプローチを使用する必要はありませんが、JSをさらに学習するときは、これを心に留めておいてください。遅かれ早かれクロージャを使い始めるでしょう、私は約束します:)

于 2012-11-30T12:43:32.940 に答える
0

Call the hoverfunction on click of another item is one of many solutions

$(document).ready(function(){
     $("#cbox").hover(function(){ 

         $(this).stop(true,false)
         .animate({right:  0}, 500); },
          function(){               

              $("#cbox").stop(true,false).animate({right: -120}, 500); });
     });

     $('.itemClicked').click(function(e){

           $('#cbox').trigger('hover');

     });

});

于 2012-11-30T12:22:05.217 に答える