Question

我是JS，HTML和CSS的新手。到目前为止，我创建了一个创建随机卡片的按钮。在卡片上是p标签“标题”。单击卡片时，您将看到两个输入字段以及一个保存和删除按钮。

我需要设计方面的帮助。我尽我所能，但我不能使这两个按钮和两个输入字段看起来很好。你可以帮我吗？
当我点击卡片时，我希望p标签标题进入其中一个输入字段。当我点击input字段时，p标记应该会再次消失。
我最后要做的是只有一张卡可以处于编辑模式。

这是我的代码：

$(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>

Answer 1

试试这个 - 这可能会对你有所帮助

我已经改变了

使用CSS进行一些设计更改
输入将在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>

通过按随机卡将p标签放入输入字段

1 个答案: