2012-03-21 40 views
0

我有一個相當大的程序,我已簡化以顯示我遇到的問題。我有2個div,我有一個圖像和一些文本。當我將鼠標懸停在圖像上時,jQuery將鼠標懸停在圖像事件上。通過這一切,我能夠得到他們的父母div的圖像&的Id。但是,當我嘗試獲取數組中的Id的索引值時,它始終返回-1 ie ...未找到。無法使用Array.indexOf方法在JavaScript中工作

您能否請幫助。代碼如下所示。我是新來的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'方法。不是'String.indexOf'。 – 2012-03-21 11:57:57

回答

2

很少有東西是錯誤的。主要是在查詢input_array的值時,使用的是div_id而不是input_id。此外,你不應該處處做new String(),它是更好地創建數組是這樣的:當你不使用的hover第二功能

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

最後,它更有意義只使用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 2012-03-21 12:08:56

+0

@Yoshi我想不出有什麼理由,我只是把它和原來的代碼放在一起。 – 2012-03-21 12:10:13

+0

啊!沒有看原代碼,對不起;) – Yoshi 2012-03-21 12:11:12

0

array使用基於整數索引,因此您的代碼將無法正常工作。 我看着你的代碼,我想你需要的東西是這樣的:

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

現在,如果你想獲得一個div的ID,你可以這樣做:

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

希望它能幫助!

1

Array.indexOf方法在所有瀏覽器中都不受支持。有一個inArray method jQuery中只使用此:

div_index = $.inArray(div_id, div_array);