Универсальная функция с выборкой
Здравствуйте. На сайте есть множество эффектов нажатия на опр. элемент, после которого появляется определенный блок. Пока у меня в коде яваскрипта очень много похожего кода, сделанные отдельно для каждого эффекта.
$("#newAdd").click(function(){
$(".formNews").slideUp(500);
$("#newsP span").css("color", "black");
$(this).css("color", "#FF0000");
$("#formNewAdd").slideDown(500);
});
$("#newUpdate").click(function(){
$(".formNews").slideUp(500);
$("#newsP span").css("color", "black");
$(this).css("color", "#FF0000");
$("#newUpdDiv").slideDown(500);
});
$("#newDelete").click(function(){
$(".formNews").slideUp(500);
$("#newsP span").css("color", "black");
$(this).css("color", "#FF0000");
$("#formNewDel").slideDown(500);
});
И решил я универсальную функцию сделать, чтобы потом только его подставлять:
function newSlide(id){
$(".formNews").slideUp(500);
$("#newsP span").css("color", "black");
$(this).css("color", "#FF0000");
id.slideDown(500);
}
При вызове функции пробовал вместо "id" подставлять "$("#formNewAdd")" - код не работает. Помогите пожалуйста, как решить проблему? |
Цитата:
|
рони,
Ниже приведу код. При открытии страницы один раз автоматически всё прыгает и встаёт. Ничего потом не изменяется. Я немножко поэкспериментировал, и код немножко изменил. Но поведение никак не изменилось - как не работало, так и не работает :-?
<style>
#newAdd {
color: #FF0000;
}
#newUpdDiv, #formNewDel {
display: none;
}
.toggleP span {
text-decoration: underline;
padding: 0 5px;
}
.toggleP span:hover {
cursor: pointer;
text-decoration: none;
color: #FF0000 !important;
}
</style>
<script src='https://code.jquery.com/jquery-3.2.1.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function(){
function newSlide(id){
$(".formNews").slideUp(500);
$("#newsP span").css("color", "black");
$(this).css("color", "#FF0000");
$(id).slideDown(500);
}
$("#newAdd").click(newSlide("#formNewAdd"));
$("#newUpdate").click(newSlide("#newUpdDiv"));
$("#newDelete").click(newSlide("#formNewDel"));
});
</script>
<p id='newsP' class='toggleP'><span id='newAdd'>Добавить объявление</span> ┃ <span id='newUpdate'>Изменить объявление</span> ┃ <span id='newDelete'>Удалить объявление</span></p>
<form method='POST' id='formNewAdd' class='formNews'>
<p>Блок 1</p>
</form>
<div id='newUpdDiv' class='formNews'>
<p>Блок 2</p>
</div>
<form method='POST' id='formNewDel' class='formNews'>
<p>Блок 3</p>
</form>
|
Булат Азат улы,
вам нужна функция, а не результат функции!!!
<meta charset="utf-8">
<style>
#newAdd {
color: #FF0000;
}
#newUpdDiv, #formNewDel {
display: none;
}
.toggleP span {
text-decoration: underline;
padding: 0 5px;
}
.toggleP span:hover {
cursor: pointer;
text-decoration: none;
color: #FF0000 !important;
}
</style>
<script src='https://code.jquery.com/jquery-3.2.1.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function(){
function newSlide(id){
$(".formNews").slideUp(500);
$("#newsP span").css("color", "black");
$(this).css("color", "#FF0000");
$(id).slideDown(500);
}
$("#newAdd").click(function() {
newSlide("#formNewAdd")
});
$("#newUpdate").click(function() {
newSlide("#newUpdDiv")
});
$("#newDelete").click(function() {
newSlide("#formNewDel")
});
});
</script>
<p id='newsP' class='toggleP'><span id='newAdd'>Добавить объявление</span> ┃ <span id='newUpdate'>Изменить объявление</span> ┃ <span id='newDelete'>Удалить объявление</span></p>
<form method='POST' id='formNewAdd' class='formNews'>
<p>Блок 1</p>
</form>
<div id='newUpdDiv' class='formNews'>
<p>Блок 2</p>
</div>
<form method='POST' id='formNewDel' class='formNews'>
<p>Блок 3</p>
</form>
или так
<meta charset="utf-8">
<style>
#newAdd {
color: #FF0000;
}
#newUpdDiv, #formNewDel {
display: none;
}
.toggleP span {
text-decoration: underline;
padding: 0 5px;
}
.toggleP span:hover {
cursor: pointer;
text-decoration: none;
color: #FF0000 !important;
}
</style>
<script src='https://code.jquery.com/jquery-3.2.1.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function(){
function newSlide(id){
return function() {
$(".formNews").slideUp(500);
$("#newsP span").css("color", "black");
$(this).css("color", "#FF0000");
$(id).slideDown(500);
}
}
$("#newAdd").click(newSlide("#formNewAdd"));
$("#newUpdate").click(newSlide("#newUpdDiv"));
$("#newDelete").click(newSlide("#formNewDel"));
});
</script>
<p id='newsP' class='toggleP'><span id='newAdd'>Добавить объявление</span> ┃ <span id='newUpdate'>Изменить объявление</span> ┃ <span id='newDelete'>Удалить объявление</span></p>
<form method='POST' id='formNewAdd' class='formNews'>
<p>Блок 1</p>
</form>
<div id='newUpdDiv' class='formNews'>
<p>Блок 2</p>
</div>
<form method='POST' id='formNewDel' class='formNews'>
<p>Блок 3</p>
</form>
|
рони,
Спасибо, всё работает. Второй вариант понравился больше - код чище и красивее. Думаю, скоростью в работе он не хуже. А почему так-то? Почему если сразу после .click() указать функцию, происходит такое? Что-то же происходит после обновления страницы, хотя и клика не было. А функция запускается после клика? |
Цитата:
вы её сами запустили newSlide("#formNewAdd"), когда формировали клик это
$("#newAdd").click(newSlide("#formNewAdd"));
равно этому
$("#newAdd").click(undefined);
третий вариант сделать код с вашей функцией рабочим
<meta charset="utf-8">
<style>
#newAdd {
color: #FF0000;
}
#newUpdDiv, #formNewDel {
display: none;
}
.toggleP span {
text-decoration: underline;
padding: 0 5px;
}
.toggleP span:hover {
cursor: pointer;
text-decoration: none;
color: #FF0000 !important;
}
</style>
<script src='https://code.jquery.com/jquery-3.2.1.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function(){
function newSlide(id){
$(".formNews").slideUp(500);
$("#newsP span").css("color", "black");
$(this).css("color", "#FF0000");
$(id).slideDown(500);
}
$("#newAdd").click(newSlide.bind($("#newAdd")[0],"#formNewAdd"));
$("#newUpdate").click(newSlide.bind($("#newUpdate")[0],"#newUpdDiv"));
$("#newDelete").click(newSlide.bind($("#newDelete")[0],"#formNewDel"));
});
</script>
<p id='newsP' class='toggleP'><span id='newAdd'>Добавить объявление</span> ┃ <span id='newUpdate'>Изменить объявление</span> ┃ <span id='newDelete'>Удалить объявление</span></p>
<form method='POST' id='formNewAdd' class='formNews'>
<p>Блок 1</p>
</form>
<div id='newUpdDiv' class='formNews'>
<p>Блок 2</p>
</div>
<form method='POST' id='formNewDel' class='formNews'>
<p>Блок 3</p>
</form>
и четвёртый
<meta charset="utf-8">
<style>
#newAdd {
color: #FF0000;
}
#newUpdDiv, #formNewDel {
display: none;
}
.toggleP span {
text-decoration: underline;
padding: 0 5px;
}
.toggleP span:hover {
cursor: pointer;
text-decoration: none;
color: #FF0000 !important;
}
</style>
<script src='https://code.jquery.com/jquery-3.2.1.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function(){
function newSlide(id){
$(".formNews").slideUp(500);
$("#newsP span").css("color", "black");
$(this).css("color", "#FF0000");
$(id).slideDown(500);
}
$("#newAdd").click($.proxy(newSlide, $("#newAdd")[0], "#formNewAdd"));
$("#newUpdate").click($.proxy(newSlide, $("#newUpdate")[0], "#newUpdDiv"));
$("#newDelete").click($.proxy(newSlide, $("#newDelete")[0], "#formNewDel"));
});
</script>
<p id='newsP' class='toggleP'><span id='newAdd'>Добавить объявление</span> ┃ <span id='newUpdate'>Изменить объявление</span> ┃ <span id='newDelete'>Удалить объявление</span></p>
<form method='POST' id='formNewAdd' class='formNews'>
<p>Блок 1</p>
</form>
<div id='newUpdDiv' class='formNews'>
<p>Блок 2</p>
</div>
<form method='POST' id='formNewDel' class='formNews'>
<p>Блок 3</p>
</form>
|
Булат Азат улы,
P.S. тоже самое,форум, искать открывашка более 300 вариантов |
рони,
Спасибо большое! Всё понял! |
| Часовой пояс GMT +3, время: 07:32. |