0

編集 私は何が間違っていたかを理解しました。あなたもそれを見つけることができるかどうかを見たい場合は、お気軽に. それ以外の場合は、回答に回答を投稿しました。

以前にこの質問をしたことがあるので、先に進んですべてのコードを投稿しますが、問題を見つけるのに不要だと思ったものは省略しましたが、回答者はすべてのコードを望んでいました。

次のコードは、完全に正常に動作する私の他のコードをモデルにしていますが、この方法では動作しません。オクラホマ州の地図の画像である最初の div という名前#containerがあり、その画像には州のさまざまなセグメントが表示されます。私の古いコードでは、ユーザーがセグメントの特定の領域をクリックすると、#containerdiv がオフになり、そのセグメントの「ズームイン」画像の画像の div がオンになります。コードをより簡潔にするはずの新しいコードの後、#containerオフに切り替えられません（新しいdivをオンに切り替えないと思われます）。

ユーザーがクリックしたときのマウスの位置を使用して、どのセグメント ( #region) をオンにするかを決定します。私はピクセル座標を使用し、それらの座標をスケーリングするために計算を行ったので、画面サイズは関係ありません。

そして今、ここに新しいバグのあるコードがあります:

$(document).ready(function()
{


//Main Oklahoma map
$("#container").click(function(e)
{
    var x = event.pageX;
    var y = event.pageY;

    const scaling_Screen_Max_Pixel_X = 1679;
    const scaling_Screen_Max_Pixel_Y = 924;

    // Math for the scaling of different sized windows
    var currentX = $(document).width();
    var currentY = $(document).height();
    var xScale = currentX/scaling_Screen_Max_Pixel_X;
    var yScale = currentY/scaling_Screen_Max_Pixel_Y;

    // Variables for different regions
    var zoneX = x/xScale;
    var zoneY = y/yScale;

    // Arrays containing the min and max x and y values of the rectangular area around a farm
    var minX = [47, 593, 593, 958, 600, 744, 852, 1025, 1060, 1159, 1366];
    var maxX = [553, 958, 792, 1011, 1124, 1124, 1149, 1598, 1280, 1623, 1551];
    var minY = [250, 250, 473, 349, 526, 665, 495, 248, 471, 520, 481];
    var maxY = [330, 473, 515, 478, 665, 721, 526, 471, 500, 763, 520];

    var regionNumber = [1,2,2,2,3,3,3,4,4,5,5];

    /** Loops through the values within the coordinate arrays to
        determine if the user clicked within a certain area **/
    for (var i = 0; i < minX.length; i++)
    {
        if(zoneX >= minX[i] && zoneX <= maxX[i] && zoneY >= minY[i] && zoneY <= maxY[i]) 
        {
            $("#region"+region[i]).toggle();
            $("#container").toggle(); //toggle off
        }
    }
   }); 
 });

minX、maxX などの配列の座標は順番に並べられているため、これら 4 つの配列のそれぞれの最初の要素は最初の領域に属します ( #region1)。私がregionNumber配列を持っている理由は、領域が完全に長方形ではないため、一部の領域の座標の「長方形」セットが複数あるためです。

前に言ったように、リージョンをクリックしても何も起こりません。ここで何が問題なのか分かりますか?

4

1 に答える 1

0

おっとっと！ここに座って自分のコードを見つめていると、何が問題なのかがわかりました。$("#region"+regionNumber[i]).toggle();の代わりに言うのを忘れていました$("#region"+region[i]).toggle();。

今では問題なく動作します。みんな見てくれてありがとう！

于 2011-03-29T13:29:18.210 に答える