Question

有人知道为什么按钮在点击时不会对输入作出反应？我希望单击以显示提示，然后使用提示中的文本并将其作为列表项追加到hmtl中，其中css与其他列表项相同。

$(".btn").click(function() {
  var text = prompt('What do you need to do?')
  var txt1 = $("<li id="
    listItem "><p></p></li>").text(text);
  $("#itemList").append(txt1);
});

body {
  background: #bff0ff;
}

li {
  display: inline-block;
  float: left;
  padding: 5px;
}

#list {
  list-style-type: none;
}

#itemList {
  list-style-type: none;
}

#listItem {
  width: 250px;
  height: 75px;
  border-radius: 5px;
  background: #5ABCB9;
}

#listItem p {
  font-family: curive, sans-serif;
  text-align: center;
  font-size: 20px;
  color: #
}

.btn {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 1px;
  font-size: 40px;
  background: #63E2C6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<input type="button" class="btn" value="+" />
<ul id="itemList">
  <li id="listItem">
    <p>
      Study for exams.
    </p>
  </li>
</ul>

Answer 1

如果您尝试向现有li添加更多ul个元素，请尝试以下操作（因为渲染时将忽略您当前的实现p元素：

$(".btn").click(function() {
  var text = prompt('What do you need to do?')
  var $li = $('<li/>',{ 'class' : 'listItem' })
  var $p = $('<p/>', { 'text' : text })
  $($li).append($p);
  $("#itemList").append($li);
});

示例：https://jsfiddle.net/9av0c8z3/

Answer 2

您需要做一些事情。首先应该是清理JS中的错误，即这不是一个合适的字符串：

"<li id="listItem"><p></p></li>"

点击第二个双引号（"）后，您不再使用字符串，并认为listItem是变量。

我个人使用单引号作为字符串（'）。

'<li id="listItem"><p></p></li>'

然后你将不得不重做你在CSS中使用ID的方式。 ID应该是唯一的，不能重复使用，这就是一个类的用途。因此，我已将id="listItem"的实例更改为class="listItem"，并将CSS从#listItem更新为.listItem。

此外，当您执行此操作$( '<li id="listItem"><p></p></li>' ).text( text );时，文本会添加到li，并且不会创建p。因此，首先创建p，然后将文本添加到其中，然后将其附加到li。

之后我认为你很高兴。

var $itemList = $( '#itemList' );

$( '.btn' ).click( function( e ) {

  var text = prompt( 'What do you need to do?' ),
      p    = $( '<p>', { text: text } ),
      li   = $( '<li>', { "class": 'listItem' } ).append( p );
  
  $itemList.append( li );
  
} );

body {
  background: #bff0ff;
}

#itemList,
#itemList li {
  list-style: none;
}

li {
  float: left;
  padding: 5px;
}

.listItem {
  width: 250px;
  height: 75px;
  border-radius: 5px;
  background: #5ABCB9;
}

.listItem p {
  font-family: curive, sans-serif;
  text-align: center;
  font-size: 20px;
}

.btn {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 1px;
  font-size: 40px;
  background: #63E2C6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<input type="button" class="btn" value="+">
<ul id="itemList">
  <li class="listItem">
    <p>
      Study for exams.
    </p>
  </li>
</ul>

单击添加按钮绝对没有，我不知道为什么

2 个答案: