javascript - 如何通过jquery设置一个div的class和id互不影响？

Question

我做了一个简单的聊天室。我希望注释有不同的部分，所以我使用此代码将 id 和 class 设置为 div

$('<div id="fullBox">'+inpx+'</div>').addClass('showMessage').appendTo('#mainbox');

我使用 #fullBox 表示您有一个具有较大空间的 div，我使用 .showMessage 表示您有较小的空间来容纳文本。

因此我可以使用更大的空间来添加一些元素。

我的 ID 和类(class)的风格

#fullBox{
width:1100px;
margin:5px;
background-color:#fff;  
}

还有我的类(class)

.showMessage{
width :1000 px;
background-color:#03C;
word-wrap:break-word;
line-height :1.3 em;
font-size :24 px;
}

我的 ID 空间较大，我希望空间较小的类(class)可以容纳我的文本，但我的文本跟随我的 ID，我不知道如何解决它。

我使用两种不同的背景颜色来查看它们，如果我可以看到它们，我就得到了答案。

链接代码:jsfiddle

我想知道如何让自动滚动条自动显示新帖子。

Answer 1

要填充所有空间，您必须设置width:100%，如下所示。

$(document).ready(function() {
  $('.btn').on('click', function() {
    var inpx = $('.inBox').val();
    $('.inBox').val("");
    $('<div id="fullBox">' + inpx + '</div>').addClass('showMessage').appendTo('#mainbox');

  });
});

#mainbox {
  margin-top: 10px;
  float: left;
  width: 500px;
  height: 200px;
  margin-left: 9px;
  background: url(../img/dash.png);
  box-shadow: -1px 2px 1px #DCDCDC;
  border: 1px solid #c9c9c9;
  border-radius: 5px;
  border-left: 0.5em solid #06F;
  z-index: 900;
  overflow-y: auto;
}
#bottombox {
  margin-top: 10px;
  float: left;
  width: 500px;
  height: 100px;
  margin-left: 9px;
  background: url(../img/dash.png);
  box-shadow: -1px 2px 1px #DCDCDC;
  border: 1px solid #c9c9c9;
  border-radius: 5px;
  border-left: 0.5em solid #06F;
}
.inBox {
  margin-top: 30px;
  width: 400px;
  height: 30px;
  margin-left: 5px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  resize: none;
}
.btn {
  position: relative;
  top: -18px;
  margin-left: 5px;
  width: 60px;
  height: 65px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
}
#fullBox {
  width: 100%;
  margin: 5px;
  background-color: #ccc;
}
.showMessage {
  width: 100%;
  background-color: #000;
  word-wrap: break-word;
  line-height: 1.3em;
  font-size: 24px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="mainbox"></div>
<div id="bottombox">
  <form>
    <textarea class="inBox"></textarea>
    <input type="button" class="btn" value="Send">
  </form>
</div>

或者更好的是，您可以从该元素(fullBox 和 showMessage)中删除 width 并将其从父级继承。

$(document).ready(function() {
  $('.btn').on('click', function() {
    var inpx = $('.inBox').val();
    $('.inBox').val("");
    $('<div id="fullBox">' + inpx + '</div>').addClass('showMessage').appendTo('#mainbox');
  });
});

#mainbox {
  margin-top: 10px;
  float: left;
  width: 500px;
  height: 200px;
  margin-left: 9px;
  background: url(../img/dash.png);
  box-shadow: -1px 2px 1px #DCDCDC;
  border: 1px solid #c9c9c9;
  border-radius: 5px;
  border-left: 0.5em solid #06F;
  z-index: 900;
  overflow-y: auto;
}
#bottombox {
  margin-top: 10px;
  float: left;
  width: 500px;
  height: 100px;
  margin-left: 9px;
  background: url(../img/dash.png);
  box-shadow: -1px 2px 1px #DCDCDC;
  border: 1px solid #c9c9c9;
  border-radius: 5px;
  border-left: 0.5em solid #06F;
}
.inBox {
  margin-top: 30px;
  width: 400px;
  height: 30px;
  margin-left: 5px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  resize: none;
}
.btn {
  position: relative;
  top: -18px;
  margin-left: 5px;
  width: 60px;
  height: 65px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
}
#fullBox {
  margin: 5px;
  background-color: #ccc;
}
.showMessage {
  background-color: #000;
  word-wrap: break-word;
  line-height: 1.3em;
  font-size: 24px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="mainbox"></div>
<div id="bottombox">
  <form>
    <textarea class="inBox"></textarea>
    <input type="button" class="btn" value="Send">
  </form>
</div>

要查看最后一条消息，您可以使用 scrollTop设置滚动条的垂直位置。

$(document).ready(function() {
  $('.btn').on('click', function() {
    var inpx = $('.inBox').val();
    $('.inBox').val("");
    $('<div id="fullBox">' + inpx + '</div>').addClass('showMessage').appendTo('#mainbox');
    $('#mainbox').scrollTop($('#mainbox').height());
  });
});

#mainbox {
  margin-top: 10px;
  float: left;
  width: 500px;
  height: 200px;
  margin-left: 9px;
  background: url(../img/dash.png);
  box-shadow: -1px 2px 1px #DCDCDC;
  border: 1px solid #c9c9c9;
  border-radius: 5px;
  border-left: 0.5em solid #06F;
  z-index: 900;
  overflow-y: auto;
}
#bottombox {
  margin-top: 10px;
  float: left;
  width: 500px;
  height: 100px;
  margin-left: 9px;
  background: url(../img/dash.png);
  box-shadow: -1px 2px 1px #DCDCDC;
  border: 1px solid #c9c9c9;
  border-radius: 5px;
  border-left: 0.5em solid #06F;
}
.inBox {
  margin-top: 30px;
  width: 400px;
  height: 30px;
  margin-left: 5px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  resize: none;
}
.btn {
  position: relative;
  top: -18px;
  margin-left: 5px;
  width: 60px;
  height: 65px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
}
#fullBox {
  margin: 5px;
  background-color: #ccc;
}
.showMessage {
  background-color: #000;
  word-wrap: break-word;
  line-height: 1.3em;
  font-size: 24px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="mainbox"></div>
<div id="bottombox">
  <form>
    <textarea class="inBox"></textarea>
    <input type="button" class="btn" value="Send">
  </form>
</div>