Добавить пару кнопочек

Mestniy · October 24, 2016

Добрый день. Хотелось бы замутить такую вещь, как на картинке. Чтобы при нажатии на кнопку+, появлялся новый блок. Пните пожалуйста куда копать или помогите кодом))

klierik · October 24, 2016

https://api.jquery.com/clone/

Mestniy · October 24, 2016

4 минуты назад, klierik сказал:

https://api.jquery.com/clone/

Спасибо. Но как указать условие для кнопки?

Mestniy · October 25, 2016

Докапался вот до такой функции:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").clone().appendTo("body");
    });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Clone all p elements, and append them to the body element</button>

</body>
</html>

Но! При нажатии на кнопку клонируются все p на странице, т.е. если мы уже создали клона, то вставятся 2 p. А мне нужен только 1!

Mestniy · October 25, 2016

<html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).clone().insertAfter(this);
            });
         });
      </script>
  
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
 
   <body>
 
      <p>Click on any square below to see the result:</p>
  
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
  
   </body>
 
</html>

Нашел вот такой код. Постараюсь его использовать!

Вобщем вернулся я все к тому-же коду(((

<html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("img").click(function () {
               $("div").clone().insertAfter("body");
            });
         });
      </script>
  
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
 
   <body>
      
      <img src="123.png" width="50" height="50" alt="Добавить блок">
      <p>Click on any square below to see the result:</p>
      <div class = "div"></div>
   </body>
 
</html>

Может подскажите как присвоить к массиву элемент?

Edited October 25, 2016 by Mestniy

wwt · October 25, 2016

var arr = [];
var el = $('div').clone();
arr.push(el);

Mestniy · October 25, 2016

Спасибки большое)))) Вот рабочий код:

<html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
         var arr = [];
         var el = $('div').clone();
         arr.push(el);
            $("img").click(function () {
             $(el).clone().insertAfter(this);
            });
         });
      </script>
  
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
 
   <body>
      
      <img src="123.png" width="50" height="50" alt="Добавить блок">
      <div class = "div"></div>
   </body>
 
</html>

Mestniy · October 25, 2016

С этим разобрался. Все работает. Но если я вставляю еще какоето изображение, то при нажатии на него опять выполняется это действие! Подскажите, как быть?

wwt · October 25, 2016

Чтобы что-то сделать нужно понимать что вы делаете, а не просто вставлять куски кода написанные другими.

Тем более не совсем ясно что же вы пытаетесь сделать.

Mestniy · October 25, 2016

Я вас очень хорошо понимаю. Я занимаюсь созданием умных устройств, но с HTML знаком лиш косвенно. Перед собой решил поставить задачу и разобратсья в HTML, так чтобы он мне пригодился. Если можете пнуть, буду очень благодарен)

wwt · October 25, 2016

21 минуту назад, wwt сказал:

Тем более не совсем ясно что же вы пытаетесь сделать.

Mestniy · October 25, 2016

Меню для управления ардуино

wwt · October 25, 2016

https://jsfiddle.net/7071vudn/

Mestniy · October 25, 2016

Хм.. Спасибо. Т.е. я просто изменяю имя класса и могу манипулировать элементом одного и того же типа по разному! Спасибо!

Mestniy · October 25, 2016

Простите за весьма тупой вопрос, а как воссоеденить html и java)))) Все мои попытки оказались тщетными))

wwt · October 25, 2016

<!-- Подключаем jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Пользовательский код -->
<script>
  $(document).ready(function(){ 
    /*сюда javascript код*/ 
  }); 
</script>

Mestniy · October 25, 2016

Спасибо. Простите что донимаю((

Mestniy · October 26, 2016

Иду дальше. Скажите, а как сделать сохранение? Чтобы нажал на кнопку Сохранить и div сохранился вместе с заполненными там параметрами?

Вот код:

<html>

   <head>
      <title>The jQuery Example</title>
     <!-- Подключаем jQuery -->
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Пользовательский код -->
<script type = "text/javascript" language = "javascript">
  $(document).ready(function(){ 
    $('.add').on('click', function(e){
	e.preventDefault();
	var item = $('#item-template').html();
  $('.box').append(item);
});
$('.box').on('click','.remove', function(e){
	e.preventDefault();
  $(this).closest('.item').remove();
});
  }); 
</script>
  
      <style>
         .item{ margin:10px;padding:12px; border:2px solid #666; width:90%;}
      </style>
   </head>
 
   <body>
<script id="item-template" type="text/template">
	<div class="item">
	<br>
    <input type="text" size="15%">
    <input type="text" size="5%">
    <select "position:absolute;left:45%;">
   <option>Значение элемента</option>
   <option>Вкл/Выкл</option>
   <option>Ползунок</option>
   <option>Ползунок с двумя значениями</option>
   <option>Функция времени</option>
   <option>Функция времени с задержкой</option>
   </select>
   <br>
    <input type="text" size="15%">
    <input type="text" size="5%">
    <input type="text" size="40%">
    <input type="text" size="5%">
    <input type="text" size="5%">
    <input type="text" size="5%">
    <input type="text" size="5%">
    <input type="checkbox"><br>
    <img src="http://gocool.ru/uploads/images/p/l/u/plus.jpg" height="5%" width="2%" alt="Добавить">
    <img src="http://cdn-img.easyicon.net/png/5151/515126.gif" height="5%" width="2%" alt="Добавить">
    <button>Сохранить</button>
    <a href="#" class="remove">delet block</a>
  </div>
</script>
  <a href="#" class="add">New block</a>
<div class="box"></div>
   </body>
 
</html>

Sign In

Добавить пару кнопочек

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information