1

次のようなコードがあるとします。

<div class="notSelected">
      <label>Name
          <input type="text" name="name" id="name" />
      </label> 
      <div class="description">
          Tell us what's your name to make us able to fake to be your friend 
          when sending you an email.
      </div>
</div>

ここで、フォームの各要素に対してこのようなものがあるとします (これは単なる例です)。次の場合に、スタイルを notSelected から Selected に変更したいと思います。

  • 入力要素へのユーザー フォーカス
  • ユーザーが notSelected div の上にマウスを移動します

彼がフォーカスを変更すると、選択された div は再び notSelected になるはずです。

選択した div のテキストのサイズを増やすために、このようなことをしたいと思います。とにかく、他の変更も行うのはクールかもしれないので、クラス属性を変更したいと思います。

JavaScript でこのようなことを行う最善の方法は何ですか? このことを後押しできる JavaScript フレームワークはありますか? そのため、フェードなどの効果を簡単に追加できます...

MooTools をダウンロードしましたが、ドキュメントをすばやく読んでも、どのフォーム div にも特定の ID がないとこれを行う方法がわかりませんでしたが、これを使用するのは初めてです。他のフレームワークを使用しても問題ありませんが、提案する場合は、具体的に何を探すべきかについても書いてください.

4

5 に答える 5

7

この問題に対する純粋な CSS ソリューションもあります。ただし、MSIE 6 では機能しません。技術的には、Tomalek のソリューションと同様に機能しますが、JavaScript を使用して要素のクラスを切り替える代わりに、CSS を使用してそのスタイルを切り替えます。

.selectable { /* basic styles …  */ }
.selectable:hover { /* hover styles … */ }
.selectable:active { /* focus styles … */ }
于 2008-10-19T12:38:12.237 に答える
6

あなたの仕事のためにjQueryを見ることをお勧めします。学ぶのは非常に簡単で、すぐに素晴らしい効果を生み出すことができます。しかし、あなたが説明した効果だけでも、純粋な JavaScript でも十分でしょう。

DIV に常に「選択可能」と呼ばれるクラスを持たせます。後で他の CSS クラスを切り替えることができます。「selected」という名前の CSS クラスを作成し、目的の外観にします。

<div class="selectable">  (=off) vs. <div class="selectable selected"> (=on)

次に、ドキュメントのスクリプト セクションに次のような内容を追加します。

$(document).ready(function(){

  // handle mouseover and mouseout of the parent div
  $("div.selectable").mouseover(
    function() { 
      $(this).addClass("selected").addClass("mouseIsOver");
    }
  ).mouseout(
    function() { 
      $(this).removeClass("selected").removeClass("mouseIsOver");
    }
  );

  // handle focus and blur of the contained input elememt,
  // unless it has already been selected by mouse move
  $("div.selectable input").focus(
    function() {
      $(this).parents("div.selectable").not(".mouseIsOver").addClass("selected");
    }
  ).blur(
    function() {
      $(this).parents("div.selectable").not(".mouseIsOver").removeClass("selected");
    }
  );
});

これはテストされていないため、不具合がある可能性がありますが、どこから始めればよいかについての一般的なアイデアが得られます。

PS: マウスの移動時にテキスト サイズを変更することは、すべてのアイデアの中で最善ではない場合があります。これは、ユーザーにとって煩わしいページ レイアウトの再配置につながります。

于 2008-10-19T09:35:17.237 に答える
2

@トマラク：

DOM を 4 回クエリするのはなぜですか?

小さな編集ですが、速度が大幅に向上します。

$("div.selectable").mouseover(function ()
{
    // ...
}).mouseout(function ()
{
    // ...
});
于 2008-10-19T15:46:58.427 に答える
1

これは少し関係ありませんが、label タグは input タグを囲みません。入力要素の ID に対応する「for」属性を label タグに与えます。例、

<label for="username">Username</label>
<input type="text" name="username" value="Enter your username..." id="username" />
于 2008-10-19T14:55:19.280 に答える
0

元の質問とは関係のない別の回答ですが... jQueryには、ホバーと呼ばれるマウスオーバー/マウスアウトを行うための代替構文もあります。

$(element).hover(function(){ /* mouseover */ }, function(){ /* mouseout */ });

例、

$('ul#nav li').hover(function() {
    $(this).addClass('highlight');
}, function() {
    $(this).removeClass('highlight');
});

二重の $ で申し訳ありませんが、それをエスケープする方法がわかりません。

于 2008-10-20T10:05:38.130 に答える