如何在jquery中寫一個函數

夥計們實際上我很想寫這段代碼，而不是爲我所有的4個元素分別重寫相同的代碼，我想寫一個將被調用的每個元素並執行的函數。如何在jquery中寫一個函數

$(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" }); 
    }); 

});

來源

2013-07-11 Hugo Y. K.

如果你可以提供一個鏈接或jsfiddle來代入你所有的代碼，那麼我們就可以看到整個圖片。但是，它看起來好像你可以使用一個類，並與jQuery選擇該類，然後在該類中找到一個表。 –

是元素中的表格嗎？有點html會有幫助 – Pete

爲什麼你不使用我在你的這篇文章中給你的函數： http://stackoverflow.com/questions/17588362/i-want-to-write-a-reusable功能/ 17588504＃17588504 ？ – Trogvar

嘗試了這一點

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-11 12:10:25 Eric

清理，縮短你的代碼位：

$(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-11 12:11:54 aNewStart847

它確實謝謝你的隊友，這個--->函數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」}）; } –

不客氣，很高興解決你的問題！您應該接受將您的問題標記爲已解決的答案 – aNewStart847

查看此鏈接：http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work/5235#5235 – aNewStart847

你應該將數據屬性添加到您的標記，鏈接觸發元件（#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() { })。一個，圍繞你發佈的整個代碼就足夠了。

來源

2013-07-11 12:12:38 meagar

如果表是在容器內，你可以做

$('#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-11 12:19:29 Diode

如何在jquery中寫一個函數

回答

相關問題