0

Web サイトに説明ボックスのオンとオフを切り替えるボタンがあります。そのため、ボタンをクリックすると、ページ上の特定の要素にカーソルを合わせたときに画像プレビューを表示したいのですが、ボタンの選択を解除すると、画像プレビューは表示されません。

jQuery 関数を作成し、画像プレビュー ウィンドウを表示するかどうかに基づいてブール値を渡します。ただし、ブール値に関係なく、ホバー関数 ( $(".node").hover(function(e)) が呼び出されているようです。何が間違っていますか?

$('.textIcon').click(function(){

        if(textCount %2 == 0){
                        // show preview images
            imagePreview("true");
            textCount++;
        }
        else{
            // hide preview images
            imagePreview("false");
            textCount++;
        }
    });

jQuery スクリプト:

<script> 
// create pop up preview box for each step when text labels are off
this.imagePreview = function(on){

    console.log("in imagePreview, on: " + on);  

    /* CONFIG */    
        xOffset = 50;
        yOffset = 140;

        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result

    /* END CONFIG */

    if(on=="true"){
        console.log("ON");
        $(".node").hover(function(e){
            console.log("node hover");
            // title of step
            this.t = $(this).data('title');
            this.title = "";
            // image url of step
            this.href = $(this).data('image');
            // show title + image for preview
            if(this.href != null){
                var c = (this.t != "") ? this.t + "<br>": "";
                $("body").append("<p id='preview'>" + c + "<img src='"+ this.href +"' alt='Image preview' style='margin-top:5px' />" +"</p>");  
            }
            // just show title for preview
            else{
                var c = (this.t != "") ? this.t : "";
                $("body").append("<p id='preview'>"+ c +"</p>");    
            }

            $("#preview")
                .css("top",(e.pageY - xOffset) + "px")
                .css("left",(e.pageX + yOffset) + "px")
                .fadeIn("fast");                        

        },
        function(){
            this.title = this.t;    
            $("#preview").remove();
        }); 

        $(".node").mousemove(function(e){
            var dotPosition = $(this).position();
            $("#preview")
                .css("top",(dotPosition.top + xOffset) + "px")
                .css("left",(dotPosition.left + yOffset) + "px");
        }); 
        }
};
</script>
4

1 に答える 1

1

imagepreview() を呼び出すたびにホバーイベントに関数を割り当てています。代わりに、ホバーイベントを一度割り当てて、プレビューを表示するかどうかを確認してください。

次のようなものを試してください：

var showOnHover = false; // determines behaviour

$('.textIcon').click(function(){ showOnHover = !showOnHover;  }); // change behaviour onclick

// we assign it once
$(".node").hover(function(e){
   // we look if we need to do something now
   if (showOnHover){
       // onHover activated
       // do your stuff
   }
   // else shouldn't show
});
于 2013-02-10T21:03:04.640 に答える