2

だから私は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 は明らかだと思います...

「非表示」の div に関する CSS コードのフラグメントを次に示します。

#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;
}

だから誰かが私を助けることができれば、私はとても素晴らしいです:)。コードの断片を提供すると問題全体の解読が困難になる場合は、すべてのコードを自分のサイトにアップロードして、ここで共有できます。

4

2 に答える 2

2

私が目にする主な問題は、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';
  }
}

ただし、window.load を含むこれらすべてを次のように単純化できるため、jQuery を検討することをお勧めします。

$(function() {
  $('#souporderform label').hover(
    function() {
      $('#soupinfo').css('visibility', 'visible');
    },
    function() {
      $('#soupinfo').css('visibility', 'hidden');
    }
  );
});
于 2011-09-07T04:25:56.497 に答える
0

Blender がコメントしたように、これには jQuery や MooTools などの JavaScript ライブラリを使用することもお勧めします。さて、私があなたを正しく理解していれば、要素 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();
        });
    });
});
于 2011-09-07T04:30:26.147 に答える