javascript - 如何将一个类和id设置为一个不会通过jquery相互影响的div?

javascript - 如何将一个类和id设置为一个不会通过jquery相互影响的div?,第1张

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

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

我使用#fullBox来说你有一个具有更大空间的div我使用.showMessage说它你有更小的空间来容纳文本。

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

我的id和类的风格

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

和我的班级

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

我的身份证有更大的空间,我希望我的课程空间较小,但是我的文字跟着我的身份,我不知道如何解决。

我使用两种不同的背景颜色来看他们两个如果我能看到他们两个我得到我的答案。

链接代码:jsfiddle

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

最佳答案:

2 个答案:

答案 0 :(得分:2)

要填写您需要设置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>

或者甚至更好的是,您可以从这些元素中移除widthfullBoxshowMessage),并将从父级继承。

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

答案 1 :(得分:1)

您可以添加效果以在每次点击时滚动到div的底部。只需在on.("click", function() {功能之后将此代码添加到append

$('#mainbox').animate({ scrollTop: $("#mainbox").height() }, "fast");
本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复