Форум

Булат Азат улы · #1 (**permalink**) 09.09.2017, 22:38

Здравствуйте. На сайте есть множество эффектов нажатия на опр. элемент, после которого появляется определенный блок. Пока у меня в коде яваскрипта очень много похожего кода, сделанные отдельно для каждого эффекта.

$("#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")" - код не работает.

Помогите пожалуйста, как решить проблему?

рони · #2 (**permalink**) 09.09.2017, 23:11

Сообщение от Булат Азат улы

код не работает.

какие будут доказательства?

Булат Азат улы · #3 (**permalink**) 10.09.2017, 10:09

рони,
Ниже приведу код. При открытии страницы один раз автоматически всё прыгает и встаёт. Ничего потом не изменяется.
Я немножко поэкспериментировал, и код немножко изменил. Но поведение никак не изменилось - как не работало, так и не работает

<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>

рони · #4 (**permalink**) 10.09.2017, 10:24

Булат Азат улы,
вам нужна функция, а не результат функции!!!

<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>

Булат Азат улы · #5 (**permalink**) 10.09.2017, 11:27

рони,
Спасибо, всё работает. Второй вариант понравился больше - код чище и красивее. Думаю, скоростью в работе он не хуже.

А почему так-то? Почему если сразу после .click() указать функцию, происходит такое? Что-то же происходит после обновления страницы, хотя и клика не было. А функция запускается после клика?

рони · #6 (**permalink**) 10.09.2017, 12:13

Сообщение от Булат Азат улы

. А функция запускается после клика?

для первоначального варианта!!!
вы её сами запустили 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>

рони · #7 (**permalink**) 10.09.2017, 12:20

Булат Азат улы,
P.S.
тоже самое,форум, искать открывашка более 300 вариантов

Булат Азат улы · #8 (**permalink**) 10.09.2017, 12:21

рони,
Спасибо большое! Всё понял!

Форум

Справочник

Discord чат

Курсы javascript