javascript - 模态显示下一行的瞬间

Question

有一个 while 循环来显示数据库中的所有数据，每个 div 上都有一个按钮。当用户单击该按钮时，该特定信息就会以模式显示。实际上它工作正常，但有一个小错误。使用“textarea”添加到数据库的描述。因此它包含从下一行开始的几个段落。在模态中显示数据时没有下一行。在模式中，它在下一行的瞬间显示“
”。我想当用户单击模式时在新行中显示文本。请帮我解决它。

我已附上错误图像。

<li>
   <div class="media wow fadeInDown articleclick" data-title="<?php echo $row2['title']; ?>" data-description="<?php echo nl2br($row2['article']); ?>" data-html="true" data-img="img/<?php if($row2['image']==''){ echo ''; } else { echo $row2['image']; } ?>" data-toggle="modal" data-target="#myModal" >
   <a href="#" class="media-left">
      <img alt="img" class="img-responsive" src="img/<?php if($row2['image']==''){ echo './noarticle.gif'; } else { echo $row2['image']; } ?>" style="height: 85%;">
   </a>
   <div class="media-body">
      <h4 class="media-heading"><a href="#"><?php echo $row2['title'];?></a></h4> 
   </div>
   </div>
</li>

<script>
 $(document).on("click", '.articleclick', function (e) {
   var description = $(this).data('description');
   var title = $(this).data('title');
   var img = $(this).data('img');
   $(".descrpdisplay").text(description);
   $(".titledisplay").text(title);
   $('.imgdisplay').attr('src', img);
 });
</script>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="myModalLabel">Articles</h4>
    </div>
    <div class="modal-body">
      <img src="" class="img-responsive imgdisplay">
      <b><div class="titledisplay" style="padding: 25px 0px 10px 0px;"></div></b>
      <div class="descrpdisplay" ></div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div>
    </div>
  </div>
</div>

Answer 1

您尝试解决什么问题？当您将日期解析到数据库时，替换\r\n是一个问题。与其他东西。例如:

$text= $_POST["textarea"];
str_replace("\r\n"," ", $text);

当您尝试在页面上显示它时 - 您可以在 PHP 端解决同样的问题。

否则，您应该先准备好文本，然后再用 JS 将其发送到后面，或者重新渲染，然后再将其放置在 HTML 上。

str = str.replace(/(?:\r\n|\r|\n)/g, '</p><p>');

在这两种情况下，您都知道任何文本都应以 <p> 开头。并以 </p> 结尾.如果有换行符如 \r\n你应该把它变成 </p><p> .

当然，您会在双换行符上收到额外的段落，并且应该在页面显示之前或之后阻止它。确定“正确的一方”，我们将为您扩展解决方案。

UPD(一些想法):

$(document).ready(function() {

  var textArea = $('textarea').text();
  console.log(textArea);

  $('.textBefore').text(textArea);
  
  var textAfter = ''
  + '<p>'
  +    textArea.replace(/(?:\r\n|\r|\n|<br \/>|<br>)/g, '</p><p>')
  + '</p>';

  textAfter = textAfter.replace(/<p><\/p>/g, '');
  
  $('.textAfter').html(textAfter);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea>
  Some 
  text 
  example
</textarea>
<div class="textBefore"></div>
<div class="textAfter"></div>