2012-03-21 6 views
0

У меня есть довольно большая программа, которую я упростил, чтобы показать проблему, которая у меня есть. У меня есть 2 div, под которыми у меня есть изображение и некоторый текст. Когда я нахожусь на изображении, срабатывает jQuery над событием изображения. Благодаря этому я могу получить идентификаторы обоих изображений & своих родительских div. Однако, когда я пытаюсь получить значение индекса Id в массиве, он всегда возвращает -1, то есть ... не найден.Не удается получить метод 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'. –

ответ

2

Немного ошибочных вещей. В основном вы используете div_id вместо input_id при поиске значения с input_array. Кроме того, вы не должны делать new String() везде, и это лучше, чтобы создать массивы, как это:

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

Наконец, как вы не используете 2-й функции 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 использует индексацию на основе целого числа, так что ваш код не будет работать. Когда я смотрю на ваш код я думаю, вам нужно что-то вроде этого:

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

Теперь, если вы хотите получить идентификатор div вы можете сделать это:

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); 
Смежные вопросы