Нужна помощь, чтобы сделать мой Javascript ненавязчивым - PullRequest
Новая
       31

Нужна помощь, чтобы сделать мой Javascript ненавязчивым

2 голосов
/ 07 сентября 2011

Итак, я создал форму заказа в HTML + Javascript, и я хочу использовать Javascript для того, чтобы, когда кто-то наводил курсор на «ярлык» супа, был виден скрытый div (позже я намереваюсь получить код, который будет отображать информацию о супе, этикетка которого была надета). Мне удалось заставить это работать, но я знаю, что код Javascript, который я реализовал, является навязчивым, и я хочу поместить тот же код (или эквивалентный) в мой внешний файл Javascript, чтобы сделать его не навязчивым.

Вот фрагмент кода из моей формы (с «навязчивым» Javascript): 

<form method="post" action="#" name="souporderform" id="souporderform" onsubmit="return validate()">
**<div id="soupinfo"></div>** <!-- hidden div -->

<table>

<tr><th>Item</th><th>Price</th><th>Quantity</th><th id="subtotal_header">Subtotal</th>
<tr>
<td><label for="chicken_quantity" onmouseover="document.getElementById('soupinfo').style.visibility = 'visible';" onmouseout="document.getElementById('soupinfo').style.visibility = 'hidden';">Chicken Soup</label></td>
<td>$3.50<input type="hidden" id="chicken_price" value="3.50"></td>
<td class = "center"><select id="chicken_quantity" name="chicken_quantity" size="1">
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="0" selected>0</option>
</select>
</td>
<td id="chicken_subtotal"></td>

Я уверен, что навязчивый Javascript очевиден для опытных кодировщиков Javascript, просматривающих это ...

Вот фрагмент кода CSS, связанный с «скрытым» div: 

#soupinfo{
position:absolute;
background-color:#ff0000;
color:#000000;
width:100px;
height:20px;
margin-top:-20px;
margin-left:0px;
border:1px solid black;
visibility:hidden;
}

У меня есть внешний файл Javascript, и это то, что я пытался сделать, чтобы ненавязчиво воспроизвести то, что я хочу: 

var soupInfoDiv = document.getElementById("soupinfo");
var formLabel = document.getElementsByTagName("label");

for(var i = 0; i < formLabel.length; i++){
formLabel[i].onmouseover = soupInfoDiv.style.visibility = 'visible';
formLabel[i].onmouseout = soupInfoDiv.style.visibility = 'hidden';
}

Этот код помещен в функцию под названием «setup», которая выполняется при загрузке страницы со следующим кодом: 

if (document.getElementById) {
window.onload = setup;
}

Так что, если кто-нибудь сможет мне помочь, я буду очень благодарен :). Если предоставление фрагментов кода затрудняет расшифровку общей проблемы, я могу загрузить весь код на свой сайт и поделиться им здесь.

Ответы [ 2 ]

2 голосов
/ 07 сентября 2011

Основная проблема, которую я вижу, заключается в том, что обработчики mouseover и mouseout должны быть функциями. 

var soupInfoDiv = document.getElementById("soupinfo");
var formLabel = document.getElementsByTagName("label");

for(var i = 0; i < formLabel.length; i++){
  formLabel[i].onmouseover = function() {
    soupInfoDiv.style.visibility = 'visible';
  }
  formLabel[i].onmouseout = function() {
    soupInfoDiv.style.visibility = 'hidden';
  }
}

Я бы порекомендовал вам рассмотреть jQuery, потому что все это, включая window.load, можно упростить до этого: 

$(function() {
  $('#souporderform label').hover(
    function() {
      $('#soupinfo').css('visibility', 'visible');
    },
    function() {
      $('#soupinfo').css('visibility', 'hidden');
    }
  );
});
0 голосов
/ 07 сентября 2011

Как прокомментировал Blender, я также рекомендую использовать для этого библиотеку javascript, например, jQuery или MooTools.Теперь, если я вас правильно понимаю, вы просто хотите сделать так, чтобы при наведении курсора на элемент x вы хотели, чтобы элемент y отображался.Это можно сделать довольно просто, используя атрибуты данных html 5 (который работает в старых браузерах) и инфраструктуру javascript (здесь я буду использовать jQuery, но если вам нужны mootools, просто спросите, и я переведу его).

Сначала вы должны пометить элемент, над которым хотите навести курсор, следующим образом: 

<div data-hover-elm="id_of_item_to_show">.......</div>

Это может быть div, метка или все, что вы хотите.

Затем во внешнем файле js все, что вам нужно сделать, это: 

$(function() {
    var elms = $('[data-hover-elm]');
    $.each(elms, function() {
        var $this = $this,
            $itm = $('#' + $this.attr('data-hover-item'));
        $this.hover(function() {
            $itm.show();
        }, function() {
            $itm.hide();
        });
    });
});
...