2012-03-21 4 views
0

私は、私が持っている問題を表示するために簡略化したかなり大きなプログラムを持っています。私は2つのdivの下に私はイメージといくつかのテキストを持っています。私が画像上にマウスを置くと、jQueryがイメージイベントの火災にカーソルを合わせます。このすべてを通して、私は両方の画像のIDを取得することができます&親のdivです。しかし、配列内のIdのインデックス値を取得しようとすると、常に-1が返されます。見つからないためです。JavascriptでArray.indexOfメソッドを使用できない

助けてもらえますか?コードは以下の通りです。私はjavascript & jQueryの新機能ですので、いくつかの助けが必要です。多分、その解決策は非常に簡単です。

ありがとうございます。よろしく、sbguy

<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
var input_array = new Array("input1_Id", "input2_Id"); 
var div_array = new Array("div1_Id", "div2_Id"); 

window.onload=function(){ 
    jQuery.ready(); 
    img_hover_event_handler(); 
} 
//________________________________________________ 

function img_hover_event_handler() { 
    var input_id = ""; 
    var div_id = ""; 
    var input_index, div_index; 
    $("input.Lrollover").hover(
     function() {  
      input_id = new String(this.id); 
      input_index = new String(input_array.indexOf(div_id)); 
      div_id = new String($(this).closest('div').attr('id')); // id of the parent div 
      div_index = new String(div_array.indexOf(div_id)); 
      alert(input_id + ", " + input_index + ", " + div_id + ", " + div_index);    
     }, 
     function() { 
    }); 
} 

</script> 
</head> 

<body> 
    <div id="div1_Id"> 
    <input class="Lrollover" id="input1_Id" type="image" src="images/LGbtn_off.png" alt="Image1" /> 
    <p id="myp1_Id">"Hello World 1"</p> 
    </div> 
    <br><br><br> 
    <div id="div2_Id"> 
    <input class="Lrollover" id="input2_Id" type="image" src="images/LGbtn_off.png" alt="Image2"/> 
    <p id="myp2_Id">Hello World 2"</p> 
    </div> 

</body> 
</html> 
+2

あなたは 'Array.indexOf'メソッドを使用しています。これはjQueryにはinArray methodがあります。 'String.indexOf'ではなく。 –

答えて

2

いくつか間違っています。主に、input_arrayの値を参照するときにinput_idの代わりにdiv_idを使用しています。また、あなたはどこにでもnew String()をやっているはずの、それはこのようなあなたの配列を作成すると良いでしょう:

var input_array = ["input1_Id", "input2_Id"]; 

を最後に、あなたがhoverの第二の機能を使用していないとして、それはだけではなく、mouseoverを使用するより理にかなっています。

の作業コード:

var input_array = ["input1_Id", "input2_Id"]; 
var div_array = ["div1_Id", "div2_Id"]; 

function img_hover_event_handler() { 
    var input_id = "", div_id = "", input_index, div_index; 
    $("input.Lrollover").mouseover(
     function() {  
      input_id = this.id; 
      input_index = input_array.indexOf(input_id); 
      div_id = $(this).closest('div').attr('id'); 
      div_index = div_array.indexOf(div_id); 
      alert(input_id + ", " + input_index + ", " + div_id + ", " + div_index);    
     }); 
} 

img_hover_event_handler(); 

例 - http://jsfiddle.net/dNvXp/

+0

ハンドラ関数の代わりに 'img_hover_event_handler'で変数を宣言する理由はありますか?私は注意深く扱わなければ、これが予期せぬ動作につながる可能性があると思います(ただしこのコード例ではありません)。 – Yoshi

+0

@ Yoshi私は理由を考えることができません、私はちょうど元のコードと同じままにしました。 –

+0

ああ!元のコードを見なかった、申し訳ありません;) – Yoshi

0

arrayは整数ベースのインデックスを使用していますので、あなたのコードは動作しません。

input_id = new String(this.id); 
input_div[input_id] // --> this will return the corresponding div id 

はそれが役に立てば幸い:今、あなたはあなたがこれを行うことができますdivのIDを取得したい場合

var input_div = { 
    "input1_Id" : "div1_Id", 
    "input2_Id" : "div2_Id" 
}; 

:私はあなたのコードを見ると は、私はあなたがこのようなものが必要だと思います!

1

Array.indexOfメソッドは、一部のブラウザではサポートされていません。

div_index = $.inArray(div_id, div_array); 
関連する問題