2

みんな、実際にはこのコードをすぐに書きたいのですが、4つの要素すべてに対して同じコードを個別に書き直すのではなく、各要素に対して呼び出されて実行される関数を書きたいと思います。

$(function(){
$('#basic').mouseover(function(){
    $('#table-one').css({ boxShadow : "0 0 5px 3px rgba(100,100,200,0.4)" });
    });
$('#basic').mouseout(function(){
    $('#table-one').css({ boxShadow : "0 0 0 0" });
    });

});

$(function(){
$('#standard').mouseover(function(){
    $('#table-two').css({ boxShadow : "0 0 5px 3px rgba(100,100,200,0.4)" });
    });
$('#standard').mouseout(function(){
    $('#table-two').css({ boxShadow : "0 0 0 0" });
    });

 });   

 $(function(){
$('#pro').mouseover(function(){
    $('#table-three').css({ boxShadow : "0 0 5px 3px rgba(100,100,200,0.4)" });
    });
$('#pro').mouseout(function(){
    $('#table-three').css({ boxShadow : "0 0 0 0" });
    });

});

  $(function(){
$('#expert').mouseover(function(){
    $('#table-four').css({ boxShadow : "0 0 5px 3px rgba(100,100,200,0.4)" });
    });
$('#expert').mouseout(function(){
    $('#table-four').css({ boxShadow : "0 0 0 0" });
    });

});
4

4 に答える 4

6

マークアップにデータ属性を追加して、トリガー要素 (#standardなど) を強調表示するテーブルにリンクする必要があります。一般に、関連する要素を意味的にリンクして、コードをできるだけ汎用的にし、ページ上の幅広い要素に適用できるようにするのが賢明です。

<div id="standard" data-table="#table-one">
...
</div>

これで、すべての要素で同じハンドラーを使用できます。

$(function () {

  $('#basic, #standard, #pro, #expert').mouseOver(function () {
    $($(this).data("table")).css({ boxShadow : "0 0 5px 3px rgba(100,100,200,0.4)" });
  }).mouseout(function () {
    $($(this).data("table")).css({ boxShadow : "0 0 0 0" });
  });

});

注：すべてのブロックを でラップする必要はありません$(function () { })。あなたが投稿したコードの塊全体の周りに1つあれば十分です。

于 2013-07-11T12:12:38.653 に答える
0

コードを少しきれいにして短くしました：

$(function(){
    $('#basic').mouseover(function(){
        animateIn('#table-one');
        }).mouseout(function(){
        animateOut('#table-one');
        });
    $('#standard').mouseover(function(){
        animateIn('#table-two');
        }).mouseout(function(){
        animateOut('#table-two');
        });
    $('#pro').mouseover(function(){
        animateIn('#table-three');
        }).mouseout(function(){
        animateOut('#table-three');
        });
    $('#expert').mouseover(function(){
        animateIn('#table-four');
        }).mouseout(function(){
        animateOut('#table-four');
        });
    function animateIn(id) {
        $(id).css({ boxShadow : "0 0 5px 3px rgba(100,100,200,0.4)" });
    }
    function animateOut(id) {
        $(id).css({ boxShadow : "0 0 0 0" });
    }
});

動作するはずです。動作しない場合は教えてください

于 2013-07-11T12:11:54.160 に答える
0

これを試してみてください

function mouseIn(target) {
    $('#table-' + target).css({ boxShadow : "0 0 5px 3px rgba(100,100,200,0.4)" });
}

function mouseOut(target) {
    $('#table-' + target).css({ boxShadow : "0 0 0 0" });
}

次に、それらを次のように使用します。

$('#expert').hover(
    function() {
        mouseIn('four');
    }, function() {
        mouseOut('four');
    }
);

編集:やり過ぎ (weeehooo) の解決策は、すべてを反復処理してセットアップすることです。

var objs = {'basic': 'one', 'standard': 'two', 'pro': 'three', 'expert': 'four'};
for (var key in objs) {
    $('#' + key).hover(
        function() {
            $('#table-' + objs[key]).css({ boxShadow : "0 0 5px 3px rgba(100,100,200,0.4)" });
        }, function() {
            $('#table-' + objs[key]).css({ boxShadow : "0 0 0 0" });
        }
    );
}
于 2013-07-11T12:10:25.863 に答える
0

テーブルがコンテナ内にある場合は、次のことができます

 $('#basic', '#standard', '#pro', '#expert').mouseover(function () {
     $(this).find("table").css({
         boxShadow: "0 0 5px 3px rgba(100,100,200,0.4)"
     });
 }).mouseout(function () {
     $(this).find("table")..css({
         boxShadow: "0 0 0 0"
     });
 });

それ以外の場合は、マッピング オブジェクトを使用する必要があります

 var map = {
     "basic": "table-one",
     "standard": "table-two",
     "pro": "table-three",
     "expert": "table-four"
 };

 $('#basic', '#standard', '#pro', '#expert').mouseover(function () {
     $("#" + map[this.id]).css({
         boxShadow: "0 0 5px 3px rgba(100,100,200,0.4)"
     });
 }).mouseout(function () {
     $("#" + map[this.id]).css({
         boxShadow: "0 0 0 0"
     });
 });

どうすればそれができるかという考えだけです。コードはテストされていません。

于 2013-07-11T12:19:29.457 に答える