按下任意一张卡片，使p标签进入输入字段

Make a p tag into an input field by pressing on a random card

本文关键字：标签 输入 字段 任意一 张卡片      更新时间：2023-09-26

我是JS, HTML和CSS的新手。到目前为止，我创建了一个按钮来创建随机卡片。卡片上有一个p标签"title"。当你点击卡片时，你会看到两个输入字段和一个保存和一个删除按钮。

  1. 我需要帮助的设计。我尽了最大的努力，但我不能让这两个按钮和两个输入字段看起来很好。你能帮我一下吗

  2. 当我点击一张卡片时，我希望p标签标题进入其中一个输入字段。当我点击input字段时，p标签应该再次消失。

  3. 最后我想说的是，只有一张卡片可以处于编辑模式

这是我的代码

$(document).ready(function() {
    $("button.plus").on("click", function() {
        var newCard = $('#cardPrototype').clone(true);
        $(newCard).css('display', 'block').removeAttr('id');
        $('#newCardHolder').append(newCard);
    });
    $('body').on('click', '.card', function() {
        $(this).find('form').show();
        $(this).find('span').remove();
    });
    /*delete button*/
    $('body').on('click', '.card .delete', function() {
        $(this).closest('.card').remove();
    });
});
.item {
    width: 300px;
    margin-right: 5px;
    margin-left: 5px;
    margin-bottom: 10px;
    float: left;
    padding: 10px;
    background-color: #BBBBBB;
    border: 1px solid #ccc;
    border-radius: 10px;
}
button div.item {
    right: 0;
    margin-right: 10px;
    height: 80px;
    width: 80px;
    border-top-left-radius: 55px;
    border: 5px solid white;
    background-color: #666666;
    font-size: 70px;
    color: white;
    text-align: center;
    line-height: 75px;
    bottom: 10px;
    position: fixed;
    cursor: pointer;
    z-index: 2;
}
.input-feld {
    font-family: TheSans Swisscom;
    margin: 3px;
    width: 260px;
}
.card {
    width: 300px;
    margin-right: 5px;
    margin-left: 5px;
    margin-bottom: 10px;
    float: left;
    padding: 10px;
    background-color: #BBBBBB;
    border: 1px solid #ccc;
    border-radius: 10px;
    position: relative;
}
.delete {
    font-family: 'TheSans Swisscom';
    right: 12px;
    top: 0;
    position: absolute;
}
.speichern {
    font-family: 'TheSans Swisscom';
    background-color: greenyellow;
    border-radius: 5px;
}
.abbrechen {
    font-family: "TheSans Swisscom";
    background-color: red;
    border-radius: 5px;
    margin-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="plus">
   <div class="item">
      <p>+</p>
   </div>
</button>
<div id="newCardHolder">
</div>
<div id="cardPrototype" class="card" style="display:none;">
   <p  class="delete">x</p>
   <span>Title</span>
   <form name="theform" style="display:none;">
      <input class="input-feld" type="text">
      <br>
      <input class="input-feld " type="text">
      <br>
      <input class="speichern"type="button" onClick="new Person()" value="Speichern">
      <input class="abbrechen"type="button" onClick="new Person()" value="Abbrechen">
   </form>
</div>

试试这个-也许这对你有帮助

I have changed

  • CSS的一些设计变化
  • Input将在span标签
    • 中为相应的标题设置一个占位符
  • 只有一个项目.class将在编辑模式下可见

$(".plus").on("click", function() {
  var newCard = $('#cardPrototype').clone(true);
  $(newCard).css('display', 'block').removeAttr('id');
  $('#newCardHolder').append(newCard);
});
$('body').on('click', '.card', function() {
  $(this).find('.input-feld').attr("placeholder", $(this).find('span').text());
  $(this).find('span').hide();
  $(this).find('.minimize').show();
  $(this).find('form').show();
});

$('.card').on('click', function() {
  $('.card').find('form').hide();
  $('.card').find('span').show();
  $('.card').find('.minimize').hide();
});
/*delete button*/
$('body').on('click', '.card .delete', function() {
  $(this).closest('.card').remove();
});
/*min button*/
$('body').on('click', '.card .minimize', function() {
  return false;
});
.item {
  width: 300px;
  margin-right: 5px;
  margin-left: 5px;
  margin-bottom: 10px;
  float: left;
  padding: 10px;
  background-color: #BBBBBB;
  border: 1px solid #ccc;
  border-radius: 10px;
}
.item p {
  margin: 0px;
}
div.item {
  right: 0;
  margin-right: 10px;
  height: 80px;
  width: 80px;
  border-top-left-radius: 55px;
  border: 5px solid white;
  background-color: #666666;
  font-size: 70px;
  color: white;
  text-align: center;
  line-height: 75px;
  bottom: 10px;
  position: fixed;
  cursor: pointer;
  z-index: 2;
}
.input-feld {
  font-family: TheSans Swisscom;
  margin: 5px 3px;
  padding: 3px;
  width: 250px;
}
.card {
  width: 300px;
  margin-right: 5px;
  margin-left: 5px;
  margin-bottom: 10px;
  float: left;
  padding: 10px;
  background-color: #F4F4f4;
  border: 1px solid #ccc;
  border-radius: 3px;
  position: relative;
}
.delete {
  font-family: 'TheSans Swisscom';
  right: 12px;
  top: -10px;
  color: red;
  position: absolute;
  font-weight: bold;
  cursor: pointer;
}
.minimize {
  font-family: 'TheSans Swisscom';
  right: 28px;
  top: -10px;
  color: grey;
  position: absolute;
  font-weight: bold;
  cursor: pointer;
  display: none;
}
.speichern {
  font-family: 'TheSans Swisscom';
  background-color: lightgreen;
  border-radius: 5px;
  color: darkgreen;
  border-color: lightgreen;
  margin-top: 5px;
}
.abbrechen {
  font-family: "TheSans Swisscom";
  background-color: orangered;
  border-radius: 5px;
  margin-left: 10px;
  color: white;
  border-color: orangered;
  margin-top: 5px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="plus">
    <div class="item">
      <p>+</p>
    </div>
  </div>
  <div id="newCardHolder">
  </div>
  <div id="cardPrototype" class="card" style="display:none;">
    <p class="delete" title="delete">&times;</p>
    <p class="minimize" title="minimize">&ndash;</p>
    <span>Title</span>
    <form name="theform" style="display:none;">
      <input class="input-feld" type="text">
      <br>
      <input class="input-feld" type="text">
      <br>
      <input class="speichern" type="button" onClick="new Person()" value="Speichern">
      <input class="abbrechen" type="button" onClick="new Person()" value="Abbrechen">
    </form>
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  </div>
</body>
</html>

相关文章：