Как по нажатию кнопки заменить элемент с новой информацией на jQuery?

170
04 октября 2018, 17:00

Надо, что бы по нажатию кнопки введенная информация из правой колонки (название вверху, описание ниже) переходила в левую колонку (заметку) с возможностью закрыть (красный крестик). Подскажите, как можно это сделать с помощью jQuery? (для новичка)

(html)

<!DOCTYPE html>
<html>
<head>
    <title>Список дел</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="jquery-3.3.1.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div class="fixed-container">
        <div id="a">Список дел:
            <div id="b">Добавить новое дело</div>
        </div>
            <div class="column-left">
                <div id="header">Пример названия 
                    <button id="btn-close"><img src="close.png"></button>
                </div>
                <div id="descript">Пример описания</div>
            </div>
    </div>
    <div class="fixed-container">
            <div id="column-right">
                <div class="header-input">* Название</div>
                <input id="input-h" type="text">
                <div class="header-input">* Описание</div>
                <textarea id="input-d" type="text" name="text"></textarea> 
                <button id="bussin-butt">Добавить дело</button>
            </div>
    </div>
</body>
</html>

(JS)

$(function(){
    $('#bussin-butt')
    .click(function(){
        $('.column-left').remove();
    });
});

(CSS)

html, body {
    margin: 0;
    padding: 0;
    min-width: 1000px;
    font-family: Arial;
    background-color: #f5f5f5;
}
#a {
    font-size: 21px;
    margin-top: 65px;
    margin-bottom: 30px;
}
#b {
    float: right;
    margin-right: 261px; 
}
.fixed-container {
    width: 960px;
    margin: 0 auto;
    position: relative;
}
.column-left {
    width: 470px;
    height: 136px;
    position: relative;
    float: left;
    background-color: white;
}
    .column-left #header {
        padding: 20px;
        border-bottom: 1px solid #ebebeb;
    }
    .column-left #descript {
        margin-top: 10px;
        margin-left: 20px;
        font-size: 14px;
        color: #8993ad;
    }
    #btn-close {
        border: none;
        background-color: white;
        margin-left: 20px;
    }
#column-right {
    width: 470px;
    height: 500px;
    position: relative;
    /*bottom: 84px;*/
    float: right;
    background-color: white;
}
    .header-input {
        font-size: 14px;
        color: #8993ad;
        margin-top: 30px;
        margin-left: 40px;
    }
    #input-h {
        width: 390px;
        height: 45px;
        margin-left: 40px;
        margin-top: 10px;
        background-color: #fcfcfc;
        border: 1px solid #ebebeb;
    }
    #input-d {
        width: 390px;
        height: 230px;
        margin-left: 40px;
        margin-top: 10px;
        background-color: #fcfcfc;
        border: 1px solid #ebebeb;
        resize: none;
    }
    #bussin-but {
        width: 224px;
        height: 55px;
        margin-left: 40px;
        margin-top: 30px;
        color: white;
        background-color: #2174fd;
        border: none;
    }

    .NewStyle {
        color: red;
    }
Answer 1
$(function(){
  $('#bussin-butt').click(function() {
    $("#input-h").val($("#header").text());
    $("#input-d").val($("#descript").text());
    $('.column-left').remove();
  });
});
Answer 2

Надо, что бы по нажатию кнопки введенная информация из правой колонки (название вверху, описание ниже) переходила в левую колонку (заметку) с возможностью закрыть (красный крестик). Подскажите, как можно это сделать с помощью jQuery? (для новичка)

Вот такой вариант: 

$(document).ready(function() { 
  var i = 1; 
  // Добавление элемента 
  $(".add-task").on("click", function() { 
    var tasker = $(this).parent(); 
    var temp = $("#template") // Клонирование элемента 
      .clone() 
      // Магия клонирования 
      .addClass("gee_" + i) 
      .removeAttr("id") 
      .appendTo("div.col.displayTask") 
      .show(); 
    // Прочая магия с элементом 
    temp.removeClass("task-template"); 
    // Заполнение 
    temp.find(".taskName").text(tasker.find("#taskName").val()); 
    temp.find(".taskDesc").text(tasker.find("#taskDesc").val()); 
    temp.removeAttr("id"); 
    // Счетчик элементов 
    i++; 
  }); 
  // Удаление элемента  
  $(".displayTask").on("click", '.remTask', function() { 
    $(this).parents('.card').remove() 
  }); 
});
.card.task-template { 
  display: none; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" /> 
<div class="container"> 
 
  <div class="row"> 
    <div class="col displayTask"> 
      <!-------- Tasks here --------> 
 
    </div> 
    <div class="col"> 
      <div class="card"> 
        <div class="card-header"> 
          Featured 
        </div> 
        <div class="card-body"> 
          <p class="card-text"> 
            <div class="form-group"> 
              <label for="exampleFormControlInput1">* Task Name</label> 
              <input type="text" class="form-control" id="taskName" name="taskName" placeholder="Your task name goes here"> 
            </div> 
 
            <div class="form-group"> 
              <label for="exampleFormControlTextarea1">* Task description</label> 
              <textarea class="form-control" id="taskDesc" name="taskDesc" rows="3" placeholder="Your description goes here"></textarea> 
            </div> 
          </p> 
          <a href="#" class="btn btn-primary add-task">Add Task</a> 
        </div> 
      </div> 
 
    </div> 
  </div> 
 
</div> 
 
<!-------- template  --------> 
<div class="card task-template" id="template"> 
  <div class="card-header"> 
    <span class="taskName"> 
       
    </span> 
    <button type="button" class="btn btn-danger btn-sm remTask">X</button> 
  </div> 
  <div class="card-body"> 
    <p class="taskDesc"></p> 
  </div> 
</div>

Answer 3

Как-то так. Не люблю jquery поэтому на ваниле, по дизайну можно доработать, но логика в порядке.

var form = document.getElementsByClassName('form')[0]; 
var cards = document.getElementsByClassName('cards')[0]; 
var header = document.getElementsByClassName('form-input')[0]; 
var disc = document.getElementsByClassName('form-textarea')[0]; 
form.addEventListener('submit', function(e) { 
  e.preventDefault(); 
  var headerValue = header.value; 
  var discValue = disc.value; 
 
  header.value = ''; 
  disc.value = ''; 
 
  if (!headerValue || !discValue) { 
    return 
  } 
  var card = ' <div class="card">\n' + 
    '            <h3 class="card-header">' + headerValue + '</h3>\n' + 
    '            <div class="card-close"> X </div>\n' + 
    '            <div class="card-show"> \\/</div>\n' + 
    '            <p class="card-disc"> ' + discValue + '</p>\n' + 
    '        </div>' 
  card = createElementFromHTML(card); 
  card.getElementsByClassName('card-close')[0].addEventListener('click', function() { 
    this.parentElement.remove(); 
    emptyEl() 
  }); 
  card.getElementsByClassName('card-show')[0].addEventListener('click', function() { 
    this.parentElement.classList.toggle('card_open'); 
  }); 
  cards.insertBefore(card, cards.firstChild); 
  emptyEl(); 
}); 
 
function emptyEl() { 
  var emptyEl = document.getElementById('empty'); 
  if (cards.innerHTML.trim()) { 
    emptyEl.classList.add('hidden'); 
  } else { 
    emptyEl.classList.remove('hidden'); 
  } 
} 
 
function createElementFromHTML(htmlString) { 
  var div = document.createElement('div'); 
  div.innerHTML = htmlString.trim(); 
  return div.firstChild; 
}
* { 
  box-sizing: border-box; 
} 
 
.hidden { 
  display: none; 
} 
 
body { 
  background-color: #f5f5f5; 
  display: flex; 
  justify-content: center; 
  margin: 0; 
  font-family: 'Open Sans', sans-serif; 
} 
 
main { 
  width: 960px; 
  display: flex; 
  justify-content: center; 
} 
 
.list, 
.business { 
  width: 50%; 
} 
 
.list { 
  margin-right: 20px; 
} 
 
.list-header, 
.business-header { 
  margin-top: 65px; 
  margin-bottom: 35px; 
  font-weight: normal; 
} 
 
#empty { 
  margin-top: 80px; 
} 
 
.card { 
  width: 100%; 
  background-color: white; 
  padding: 20px; 
  margin-bottom: 20px; 
} 
 
.card_open { 
  min-height: 140px; 
} 
 
.card-header { 
  display: inline-block; 
  width: 70%; 
  margin: 0; 
} 
 
.card_open .card-header { 
  margin: 0 0 25px 0; 
} 
 
.card-close { 
  font-weight: bold; 
  width: 20%; 
  color: darkred; 
  display: inline-block; 
  cursor: pointer; 
} 
 
.card-show { 
  font-weight: bold; 
  display: inline-block; 
  width: 2%; 
  cursor: pointer; 
} 
 
.card-disc { 
  color: #8993ac; 
  display: block; 
  overflow: hidden; 
  height: 0; 
  margin: 0; 
} 
 
.card_open .card-disc { 
  height: auto; 
} 
 
.form { 
  background-color: white; 
  padding: 50px 40px 55px 40px; 
  display: flex; 
  flex-direction: column; 
} 
 
.form-input, 
.form-textarea { 
  padding: 0 10px 0 10px; 
  margin-bottom: 30px; 
  border: 1px solid #ebebeb; 
  background-color: #f9f9f9; 
  font-size: 16px; 
} 
 
.form-input { 
  height: 45px; 
} 
 
.form-textarea { 
  height: 240px; 
  resize: none; 
  padding-top: 10px; 
} 
 
.form-label { 
  margin-bottom: 10px; 
  font-size: 12px; 
  color: #8993ac 
} 
 
.form-submit { 
  width: 225px; 
  height: 55px; 
  background-color: #2174fe; 
  border: none; 
  font-size: 18px; 
  color: white; 
  cursor: pointer; 
}
<!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=cyrillic" rel="stylesheet"> --> 
<main> 
 
  <section class="list"> 
    <h2 class="list-header">Список дел: </h2> 
    <div class="cards"> 
    </div> 
    <p id="empty">Список пуст...</p> 
  </section> 
  <section class="business"> 
    <h2 class="business-header">Добавить дело</h2> 
    <form action="" class="form"> 
      <label for="form-text" class="form-label">* Название</label> 
      <input id="form-text" type="text" class="form-input"> 
      <label for="form-textarea" class="form-label">* Дело</label> 
      <textarea id="form-textarea" class="form-textarea"></textarea> 
      <input type="submit" value="Добавить дело" class="form-submit"> 
    </form> 
  </section> 
</main>

Answer 4

$('#bussin-butt').on('click', function(){ 
  let name = $('#input-h').val(); 
  let desc = $('#input-d').val(); 
  if(!name){ 
    alert('Заполните поле Название'); 
    return false; 
  } 
  if(!desc){ 
    alert('Заполните поле Описание'); 
    return false; 
  } 
  if($('.column-left-default').length){ 
    $('.column-left-default').remove(); 
  } 
  var s = ''; 
  s += '<div class="column-left">'; 
  s += '<div class="header">'; 
  s += name; 
  s += '<button class="btn-close" onclick="javascript:removeItem(this)"><img src="close.png"></button>'; 
  s += '</div>'; 
  s += '<div id="descript">' + desc + '</div>' 
  s += '</div>'; 
  $('.tasks').append(s); 
  $('#input-h').val(''); 
  $('#input-d').val(''); 
}) 
function removeItem(el){ 
  $(el).closest('.column-left').remove(); 
  if(!$('.column-left').length){ 
   var s = ''; 
  s += '<div class="column-left-default">'; 
  s += '<div class="header">'; 
  s += 'Пример названия'; 
  s += '<button class="btn-close"><img src="close.png"></button>'; 
  s += '</div>'; 
  s += '<div id="descript">Пример описания</div>' 
  s += '</div>'; 
  $('.tasks').append(s); 
  } 
}
html, body { 
    margin: 0; 
    padding: 0; 
    min-width: 1000px; 
    font-family: Arial; 
    background-color: #f5f5f5; 
} 
 
#a { 
    font-size: 21px; 
    margin-top: 65px; 
    margin-bottom: 30px; 
} 
 
#b { 
    float: right; 
    margin-right: 261px;  
} 
 
.fixed-container { 
    width: 960px; 
    margin: 0 auto; 
    position: relative; 
} 
 
.column-left,.column-left-default { 
    width: 470px; 
    height: 136px; 
    position: relative; 
    float: left; 
    background-color: white; 
} 
 
    .column-left #header,.column-left-default #header { 
        padding: 20px; 
        border-bottom: 1px solid #ebebeb; 
    } 
 
    .column-left #descript,.column-left-default #descript { 
        margin-top: 10px; 
        margin-left: 20px; 
        font-size: 14px; 
        color: #8993ad; 
    } 
 
    #btn-close, .btn-close  { 
        border: none; 
        background-color: white; 
        margin-left: 20px; 
    } 
 
#column-right { 
    width: 470px; 
    height: 500px; 
    position: relative; 
    /*bottom: 84px;*/ 
    float: right; 
    background-color: white; 
} 
 
    .header-input { 
        font-size: 14px; 
        color: #8993ad; 
        margin-top: 30px; 
        margin-left: 40px; 
    } 
 
    #input-h { 
        width: 390px; 
        height: 45px; 
        margin-left: 40px; 
        margin-top: 10px; 
        background-color: #fcfcfc; 
        border: 1px solid #ebebeb; 
    } 
 
    #input-d { 
        width: 390px; 
        height: 230px; 
        margin-left: 40px; 
        margin-top: 10px; 
        background-color: #fcfcfc; 
        border: 1px solid #ebebeb; 
        resize: none; 
    } 
 
    #bussin-but { 
        width: 224px; 
        height: 55px; 
        margin-left: 40px; 
        margin-top: 30px; 
        color: white; 
        background-color: #2174fd; 
        border: none; 
    } 
 
 
 
    .NewStyle { 
        color: red; 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!DOCTYPE html> 
<html> 
<head> 
    <title>Список дел</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <script src="script.js"></script> 
</head> 
<body> 
 
    <div class="fixed-container tasks"> 
        <div id="a">Список дел: 
            <div id="b">Добавить новое дело</div> 
        </div> 
            <div class="column-left-default"> 
                <div id="header">Пример названия  
                    <button class="btn-close"><img src="close.png"></button> 
                </div> 
                <div id="descript">Пример описания</div> 
            </div> 
    </div> 
 
    <div class="fixed-container"> 
            <div id="column-right"> 
                <div class="header-input">* Название</div> 
                <input id="input-h" type="text"> 
                <div class="header-input">* Описание</div> 
                <textarea id="input-d" type="text" name="text"></textarea>  
                <button id="bussin-butt">Добавить дело</button> 
            </div> 
    </div> 
 
</body> 
</html>

READ ALSO
Vuex не работает getters
javascript

Vuex не работает getters

Перехватываю id из строки браузера и пытаюсь получить запись из массива находящегося в $store по id, в браузере в консоли ошибок нет, но геттер...

 147
Как сделать проверку на инпут если длина больше 2 добавлять ( / ) если нет убирать или ничего не делать
javascript

Как сделать проверку на инпут если длина больше 2 добавлять ( / ) если нет убирать или ничего не делать

Есть инпут

 163
Почему таймер на останавливается?
javascript

Почему таймер на останавливается?

В компоненте хочу реализовать таймер, по истечении которого надо сделать запросПошуршал по гугглу и стеку примеры таймеров, прикрутил свое

 183
Как создать круглый эффект огня при наведении
javascript

Как создать круглый эффект огня при наведении

Наткнулся на сайте Хоббита на такой прелестный эффект, который я обычно встречал в играх

 185