Question

我在这里停留在JavaScript上。我需要创建新的注释框并删除旧的输入。我不知道JavaScript。

方向

创建一个标签，并在第26行给它一个类
在JavaScript中为按钮创建点击处理程序
在点击处理程序中选择的类，然后获取 .val（）的值
将值存储在变量中，以便以后使用
例如：var input = $(".class").val()
您也可以使用console.log仔细检查一切是否正常！ console.log(input)
为每个新评论添加新内容

HTML：

<body>
  <div class="container">
    <h1 class="header" class="instagram">Instagram</h1>
    <img class="post" src="https://vignette.wikia.nocookie.net/garfield/images/9/9c/.028_Garfield_Odie_%26_Zachary_28_24_20_25.jpg/revision/latest/scale-to-width-down/411?cb=20160521112254">

    <div class="comments">
      <div class="row">
        <div class="avatar garfield"></div>
      <div class="comment">we look awesome!</div>
    </div>

    <div class="row">
      <div class="avatar garfield"></div>
      <div class="comment">@odie</div>
    </div>
  </div>

  <div class="row">
    <div class="avatar odie"></div>
    <input class="input" placeholder="Type here">
  </div>

  <button>Post</button>
  </div>
</body>

JavaScript：

var header = $(".header");
header.click(function () {
  header.toggleClass("instagram");
  var brand = header.text();
  header.text(brand === "Instagram" ? "Facebook" : "Instagram");
  var input = $("input").val();
  $("button").click(function() {

CSS：

body {
  background: gray;
  font-family: Tahoma;
}
.container {
  width: 425px;
  margin: 0 auto;
  background: #E8E8E8;
  padding-bottom: 15px;
}
.header {
  background-color: #3b5998;
  color: white;
  text-align: center;
  padding-bottom: 5px;
  margin: 0;
  height: 56px;
  line-height: 56px;
}
.header.instagram {
  font-family: Pacifico;
}
.post {
  width: 90%;
  margin: 10px 5% 0 5%;
  border-radius: 5px;
}
.row {
  display: flex;    
  margin: 10px;
}
.avatar {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border-radius: 50%;
  border: 1px solid gray;
  overflow: hidden;
}
.garfield {
  background-image: url('https://yiningchen.github.io/scripted/images/garfield.gif');
  background-size: contain;
  background-position: center center;
}
.odie {
  background-image: url('https://yiningchen.github.io/scripted/images/odie.jpg');
  background-size: contain;
  background-position: center center;
}
.comment {
  padding: 15px;
  width: 75%;
  border-radius: 10px;
  background-color: rgb(250,250,250);
}
.add-comment {
  border-radius: 10px;
  border: 1px solid #DCDCDC;
  padding: 5px 15px;
  width: 75%;
  font-size: 14px;
  font-family: Tahoma;
}
button {
  position: relative;
  border-radius: 5px;
  width: 90%;
  margin: 0 5%;
  padding: 10px;
  font-size: 20px;
  background: #3b5998;
  color: white;
  outline: none;
}
button:hover {
  background: #2e4c8c;
}
button:active {
  background: #2e4c8c;
  top: 1px;
}

Answer 1

要删除输入的值，可以使用以下命令：

$('input').val(null);

要创建其他输入（在您的情况下为文本框），可以执行以下操作：

$('.container').append($('<input type="text" />'));

创建新的div进行评论

1 个答案: