Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.09.2017, 22:38
Аспирант
Отправить личное сообщение для Булат Азат улы Посмотреть профиль Найти все сообщения от Булат Азат улы
 
Регистрация: 07.09.2016
Сообщений: 83

Универсальная функция с выборкой
Здравствуйте. На сайте есть множество эффектов нажатия на опр. элемент, после которого появляется определенный блок. Пока у меня в коде яваскрипта очень много похожего кода, сделанные отдельно для каждого эффекта.
$("#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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от Булат Азат улы
код не работает.
какие будут доказательства?
Ответить с цитированием
  #3 (permalink)  
Старый 10.09.2017, 10:09
Аспирант
Отправить личное сообщение для Булат Азат улы Посмотреть профиль Найти все сообщения от Булат Азат улы
 
Регистрация: 07.09.2016
Сообщений: 83

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

Последний раз редактировалось Булат Азат улы, 10.09.2017 в 10:14.
Ответить с цитированием
  #4 (permalink)  
Старый 10.09.2017, 10:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Булат Азат улы,
вам нужна функция, а не результат функции!!!
<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
Аспирант
Отправить личное сообщение для Булат Азат улы Посмотреть профиль Найти все сообщения от Булат Азат улы
 
Регистрация: 07.09.2016
Сообщений: 83

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

А почему так-то? Почему если сразу после .click() указать функцию, происходит такое? Что-то же происходит после обновления страницы, хотя и клика не было. А функция запускается после клика?
Ответить с цитированием
  #6 (permalink)  
Старый 10.09.2017, 12:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от Булат Азат улы
. А функция запускается после клика?
для первоначального варианта!!!
вы её сами запустили 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Булат Азат улы,
P.S.
тоже самое,форум, искать открывашка более 300 вариантов
Ответить с цитированием
  #8 (permalink)  
Старый 10.09.2017, 12:21
Аспирант
Отправить личное сообщение для Булат Азат улы Посмотреть профиль Найти все сообщения от Булат Азат улы
 
Регистрация: 07.09.2016
Сообщений: 83

рони,
Спасибо большое! Всё понял!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
AJAX функция для новых html-элементов broadcast77 AJAX и COMET 25 03.03.2014 14:01
Универсальная функция Valdemor Общие вопросы Javascript 2 22.06.2013 14:43
Универсальная функция для сворачивания нескольких типовых блоков fennick Элементы интерфейса 7 26.09.2011 13:23
Универсальная функция Ajax запроса Finesse AJAX и COMET 21 15.06.2011 17:17
Универсальная функция для формы Nightmare Общие вопросы Javascript 5 16.04.2010 18:42