Question

我是网页设计的本科生初学者。我现在正在学习jquery，我想知道如何编写一个函数来重用其他元素这里的函数是1个元素的workind，我想单独地应用于其他元素。

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

这是我要复制到4列

的html代码

    <div class="small-3 large-3 column table" id="table-one">
    <div class="box" id="one">
        <h5>Basic</h5>
    </div>
    <div class="box" id="two">
        <h3>$199<br /><span>per month</span></h3>
    </div>
    <div class="box" id="three">
        <p><strong>10</strong> projects</p>
    </div>
    <div class="box" id="four">
        <p><strong>5GB</strong> Storage</p>
    </div>
    <div class="box" id="five">
        <p><strong>Free</strong> Live Support</p>
    </div>
    <div class="box" id="six">
        <p><strong>2 years</strong> licence</p>
    </div>
    <div class="box" id="seven">
        <p><strong>Basic</strong> Customization</p>
    </div>
    <div class="box" id="eight">
        <a href="#"><button class="sign-up" id="basic">SIGN UP</button></a>
    </div>
</div>

Answer 1

我想你想要这样的东西

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

function applyHoverStyles(triggerSelector, targetSelector, mouseOverStyle, mouseOutStyle) {
    $(triggerSelector).mouseover(function() {
        $(targetSelector).css(mouseOverStyle);
    });

    $(triggerSelector).mouseout(function() {
        $(targetSelector).css(mouseOutStyle);
    });
}

Answer 2

自从我使用jQuery已经很久了，无论如何都试试这个： http://jsbin.com/izaxeb/

参考：.hover()

(function ($) {
    $.fn.inout = function (ele1) { //defining a jQuery plugin
        //do stuff after calling plugin-function
        $(this).hover(function () { //on mouseover
            $(ele1).text("Told you not to touch me");
        }, function () { //on mouseout
            $(ele1).text("Thank U :)");
        });
        return this; //useful for chaining
    };
})(jQuery);

$(function () {
    $("#basic").inout("#table1"); //calling "inout" function from the plugin
});

OP：欢迎来到stackoverflow ..随时探索知识@stackoverflow

Answer 3

为此你必须使用jquery插件

Simple Jquery Plugin example

使用jquery插件，您可以重用代码

Slideshare Plugins

 $.fn.PlugInName{}

我想写一个可重用的函数

3 个答案: