как написать функцию в 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'); 
    } 
);

EDIT: Более решение избыточна (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

ответ

Смежные вопросы