Форум

Lexor · #1 (**permalink**) 04.11.2020, 20:32

Добрый вечер, я новичок в JS подскажите пожалуйста советом.
У меня есть функция вновь созданного элемента по кнопке
$(function(){
$('#ButtonNewWork').click(function () {
let divs = document.createElement("div");
let buttons = document.createElement("button");
let arrow = document.createElement("button");
$(arrow).addClass('arrow');
let Namework = $('#WhatNameWork').val();
let divNamework = document.createElement("div");
$(divNamework).addClass('divNamework');
$(divNamework).append(Namework,buttons,arrow);
let Description = $('#Description').val();
let divDescription = document.createElement("div");
$(divDescription).addClass('divDescription');
divDescription.append(Description);
$(divs).addClass("work");
$('#LeftColum').append(divs);
$(divs).append(divNamework,divDescription);
Задача cкрыть переменную divDescription к каждому вновь созданному элементу по кнопке
Я реализовывал следующем способом $('.arrow').click (function() {
$(divsArray).find(divDescription).slideToggle();}) ;
или
$('.arrow').click (function() {
let Descrip = $(divDescription);
if (Descrip.is(':visible')) {
Descrip.hide();
}
else {
Descrip.show();
}
});
Но все эти способы не скрывают один вновь созданный элемент, а скрывает все элементы с данной переменной или css классом.
Какой метод поиска элемента можно использовать для данной задачи?

рони · #2 (**permalink**) 04.11.2020, 21:43

Сообщение от Lexor

Я реализовывал следующем способом $('.arrow').click

у вас есть сами элементы, не используйте поиск по классам.

$(arrow).click (function() {
$(divDescription).slideToggle();}) ;

Lexor · #3 (**permalink**) 04.11.2020, 22:18

Я уже пробовал так, всё равно функция применяется ко всем элементам сразу, а именно последний созданный элемент скрывается как надо, а вот предпоследний уже скрывает и последний и себя, первый элемент скрывает все элементы сразу. Возможно я в массиве что-то напутал.
Я сначала думал реализовать через $(this).closest('.work').slideToggle();}(он скрывает родительский элемент кнопки), но не знаю как применить данную функцию к элементу divDescription так как в DOM модели он соседний от элемента где расположена сама кнопка.

рони · #4 (**permalink**) 04.11.2020, 23:10

Lexor,
что не так?

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .arrow:after {
      content: "arrow"
  }
  .work button:first-of-type:after{
      content: "button"
  }
  .work .divDescription{
       font:  italic 3em;
       color: red;
  }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
$(function(){
$('#ButtonNewWork').click(function () {
let divs = document.createElement("div");
let buttons = document.createElement("button");
let arrow = document.createElement("button");
$(arrow).addClass('arrow');
let Namework = $('#WhatNameWork').val();
let divNamework = document.createElement("div");
$(divNamework).addClass('divNamework');
$(divNamework).append(Namework,buttons,arrow);
let Description = $('#Description').val();
let divDescription = document.createElement("div");
$(divDescription).addClass('divDescription');
divDescription.append(Description);
$(divs).addClass("work");
$('#LeftColum').append(divs);
$(divs).append(divNamework,divDescription);
$(arrow).click (function() {
$(divDescription).slideToggle();}) ;
});
});
  </script>
</head>

<body>
<input type="text" id="WhatNameWork" value="test">
<input type="text" id="Description" value="text">
<input name="" type="button" value="click" id="ButtonNewWork">
<div id="LeftColum"></div>

</body>
</html>

рони · #5 (**permalink**) 04.11.2020, 23:10

Lexor,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Lexor · #6 (**permalink**) 05.11.2020, 00:21

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>W</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <style type="text/css">
body {
	background-color: #f5f5f5;
	width: 100%;
	height: 100%;
}
#Central 
{
	position: relative;
	width: 1150px;
}
#LeftColum  {
margin: 65px 0px 0px 160px;
float: left;
display: inline-block;
}
#RightColum {
	margin: 65px 0px 0px 20px;
	display: inline-block;
	position: absolute;
	right: 150px;


}
.WorkHead {
font-weight: normal;
font-size: 21px;
font-family: Arial;}
.work {
position: relative;
width: 340px;
height: 140px;
font-size: 16px;
font-family: Arial;
z-index: 2;
padding-bottom: 20px;

}
.work hr {
	border-width: 0.1em;
	border-color: #f7f7f7;
}
#work {
	width: 390px;
height: 140px;
background-color: #ffffff;
margin-bottom: 20px;
font-size: 16px;
font-family: Arial;
}
#notwork{
	font-size: 16px;
	position: relative;
	top: 30px;
	color: grey;
	z-index: 1;
}
#NewWork {
	width: 470px;
	height: 500px;
	background-color: #ffffff;
}
#WhatNameWork
{
	width: 390px;
	height: 48px;
	margin-left:40px;
	background-color: #fcfcfc;
	border: none;
}
.TextAll {
	color: #8993ad;
	padding-top: 30px;
	padding-left: 40px;
	font-size: 14px;
	font-family: Arial;
}
#Description
{
	width: 390px;
	height: 230px;
	margin-left:40px;
	background-color: #fcfcfc;
	border: none;
	text-align: left;

}
#ButtonNewWork
{
margin-left:40px;
margin-top: 30px;
color: #ffffff;
background-color: black;
width: 220px;
height: 60px;
text-align: center;
font-size: 16px;
border: none;
}
.but  {
	position: relative;
	border:none;
	background-color: white;
	margin-left: 10px;
	z-index: 3;
	right: 150px
	top: -30px;
}
.but:before {
    content: "\f00d";
  font-family: FontAwesome;
  font-size: 18px;
  color: red;
  background-color: white;
}
.arrow {
	position: relative;
	border:none;
	background-color: white;
	float: right;
	z-index: 3;
}
.arrow:before {
content: "\f107";
  font-family: FontAwesome;
font-size: 16px;
  color: black;
  background-color: white;

}
.divNamework {
	position: relative;
	padding-top: 10px;
	width: 320px;
	height: 40px;
	display: inline-block;
	font-size: 16px;
	background-color: #ffffff;
	z-index: 3;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: grey;
	text-align: left;
	text-indent: 10px;
}
.divDescription{
	position: relative;
	color: grey;
	font-size: 14px;
	background-color: #ffffff;
	z-index: 3;
	width: 310px;
	height: 80px;
	padding-top: 10px;
	padding-left: 10px;
}

  </style>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script defer>
$(function(){
$('#ButtonNewWork').click(function () {
	let divs = document.createElement("div");
	let buttons = document.createElement("button");
	let arrow = document.createElement("button");
	$(arrow).addClass('arrow');
	$(buttons).addClass('but');
	let Namework = $('#WhatNameWork').val();
	let divNamework = document.createElement("div");
	$(divNamework).addClass('divNamework');
	$(divNamework).append(Namework,buttons,arrow);
	//$(Namework).addClass('Namework1');
	let Description = $('#Description').val();
	let divDescription = document.createElement("div");
	$(divDescription).addClass('divDescription');
	divDescription.append(Description);

	$(divs).addClass("work");
	$('#LeftColum').append(divs);
	$(divs).append(divNamework,divDescription);
	let divsArray =  [];
	divsArray.push(divs);
	$('.but').click(function () {$(this).closest('.work').remove();});
	$('.arrow').click (function() { 
		$(divDescription).slideToggle();
});
});});</script>
	
</head>
<body>
<div id="Central">
	<div id="LeftColum">
		<h2 class="WorkHead">Список задач:</h2>
		<div id="notwork"> Список пуст...</div>
		<!--<div class="work"></div>
		<div class="work"></div>-->
	</div>
	<div id="RightColum">
		<h2 class="WorkHead">Новая задача</h2>
		<div id="NewWork">
			<div class="TextAll">*Название</div>
			<input id="WhatNameWork" type="text" name="name">
			<div class="TextAll">*Описание</div>
			<textarea id='Description' type="text" name=""></textarea>
			<button id="ButtonNewWork"> Добавить задачу </button>
		</div>
	</div>
	</div>
</body>
</html>

рони · #7 (**permalink**) 05.11.2020, 07:41

Lexor,

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>W</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <style type="text/css">
body {
    background-color: #f5f5f5;
    width: 100%;
    height: 100%;
}
#Central
{
    position: relative;
    width: 1150px;
}
#LeftColum  {
margin: 65px 0px 0px 160px;
float: left;
display: inline-block;
}
#RightColum {
    margin: 65px 0px 0px 20px;
    display: inline-block;
    position: absolute;
    right: 150px;
}
.WorkHead {
font-weight: normal;
font-size: 21px;
font-family: Arial;}
.work {
position: relative;
width: 340px;
height: 140px;
font-size: 16px;
font-family: Arial;
z-index: 2;
padding-bottom: 20px;
}
.work hr {
    border-width: 0.1em;
    border-color: #f7f7f7;
}
#work {
    width: 390px;
height: 140px;
background-color: #ffffff;
margin-bottom: 20px;
font-size: 16px;
font-family: Arial;
}
#notwork{
    font-size: 16px;
    position: relative;
    top: 30px;
    color: grey;
    z-index: 1;
}
#NewWork {
    width: 470px;
    height: 500px;
    background-color: #ffffff;
}
#WhatNameWork
{
    width: 390px;
    height: 48px;
    margin-left:40px;
    background-color: #fcfcfc;
    border: none;
}
.TextAll {
    color: #8993ad;
    padding-top: 30px;
    padding-left: 40px;
    font-size: 14px;
    font-family: Arial;
}
#Description
{
    width: 390px;
    height: 230px;
    margin-left:40px;
    background-color: #fcfcfc;
    border: none;
    text-align: left;
}
#ButtonNewWork
{
margin-left:40px;
margin-top: 30px;
color: #ffffff;
background-color: black;
width: 220px;
height: 60px;
text-align: center;
font-size: 16px;
border: none;
}
.but  {
    position: relative;
    border:none;
    background-color: white;
    margin-left: 10px;
    z-index: 3;
    right: 150px
    top: -30px;
}
.but:before {
        content: "\f00d";
    font-family: FontAwesome;
    font-size: 18px;
    color: red;
    background-color: white;
}
.arrow {
    position: relative;
    border:none;
    background-color: white;
    float: right;
    z-index: 3;
}
.arrow:before {
content: "\f107";
    font-family: FontAwesome;
font-size: 16px;
    color: black;
    background-color: white;
}
.divNamework {
    position: relative;
    padding-top: 10px;
    width: 320px;
    height: 40px;
    display: inline-block;
    font-size: 16px;
    background-color: #ffffff;
    z-index: 3;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: grey;
    text-align: left;
    text-indent: 10px;
}
.divDescription{
    position: relative;
    color: grey;
    font-size: 14px;
    background-color: #ffffff;
    z-index: 3;
    width: 310px;
    height: 80px;
    padding-top: 10px;
    padding-left: 10px;
}
    </style>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script defer>
$(function() {
    let divsArray = [];
    $('#ButtonNewWork').click(function() {
        let divs = document.createElement("div");
        let buttons = document.createElement("button");
        let arrow = document.createElement("button");
        $(arrow).addClass('arrow');
        $(buttons).addClass('but');
        let Namework = $('#WhatNameWork').val();
        let divNamework = document.createElement("div");
        $(divNamework).addClass('divNamework');
        $(divNamework).append(Namework, buttons, arrow);
        //$(Namework).addClass('Namework1');
        let Description = $('#Description').val();
        let divDescription = document.createElement("div");
        $(divDescription).addClass('divDescription');
        divDescription.append(Description);
        $(divs).addClass("work");
        $('#LeftColum').append(divs);
        $(divs).append(divNamework, divDescription);
        divsArray.push(divs);
        $(arrow).click(function() {
            $(divDescription).slideToggle();
        });
        $(buttons).click(function() {
            let index = divsArray.findIndex(function(div) {
                return div === divs
            });
            divsArray.splice(index, 1);
            $(divs).remove();
        });
    });
});</script>
</head>
<body>
<div id="Central">
    <div id="LeftColum">
        <h2 class="WorkHead">Список задач:</h2>
        <div id="notwork"> Список пуст...</div>
        <!--<div class="work"></div>
        <div class="work"></div>-->
    </div>
    <div id="RightColum">
        <h2 class="WorkHead">Новая задача</h2>
        <div id="NewWork">
            <div class="TextAll">*Название</div>
            <input id="WhatNameWork" type="text" name="name">
            <div class="TextAll">*Описание</div>
            <textarea id='Description' type="text" name=""></textarea>
            <button id="ButtonNewWork"> Добавить задачу </button>
        </div>
    </div>
    </div>
</body>
</html>

Lexor · #8 (**permalink**) 05.11.2020, 21:33

Спасибо за помощь, странно что сам до этого не дошёл, да и ранее верное решение подсказали, я не сохранил его скорее всего.

Форум

Справочник

Discord чат

Курсы javascript