我使用ajax从高级自定义字段所见即所得编辑器中传递一些数据。在我添加的标记中,我指的是类为'bio'的div。问题是当我取回数据时,它们都在一个大段落中。而不是像在所见即所得中那样分解成多个。我猜这是因为它发送的是json而不是标记???当我记录在控制台中传递的数据时,我可以看到它被分成了多个段落。有没有办法可以在单独的p标记中呈现它,或者有没有办法JS可以检测到段落的结尾,然后我可以附加一个
还是什么的
这是我的php文件
<div id="<?php echo $post->ID; ?>" class="team-section__member" data-ajax-url="<?php echo admin_url("admin-ajax.php"); ?>">
<img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="">
<div class="info">
<?php
$s = get_the_title();
$name = explode(' ', trim($s));
?>
<h4 class="name"><?php echo get_the_title(); ?></h4>
<h6 class="title"><?php echo get_field('team_member_title'); ?></h6>
<a class="phone" href="tel:<?php echo get_field('team_member_phone_number'); ?>"><?php echo get_field('team_member_phone_number'); ?></a>
<a class="email" data-email="<?php echo get_field('team_member_email'); ?>" href="mailto:<?php echo get_field('team_member_email'); ?>">Email <?php echo $name[0] . "\n"; ?></a>
<div class="bio"><?php echo get_field('team_member_bio'); ?></div>
</div>
</div>
// Member Bio modal w/ajax
$(".team-section__member .button").click(function () {
let member = $(this).parent().parent();
let memberId = member.attr('id');
let ajaxUrl = member.data('ajaxUrl');
let name = member.children('.info').find('.name').text();
let image = member.children('img').attr('src');
let title = member.children('.info').find('.title').text();
let email = member.children('.info').find('.email').data('email');
let phone = member.children('.info').find('.phone').text();
let bio = member.children('.info').find('.bio').text();
$("body").toggleClass("scroll-lock");
console.log(bio);
$.ajax({
type: "POST",
url: ajaxUrl,
dataType: 'json',
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
data: {
action: 'post_member_id',
id: memberId,
image: image,
name: name,
title: title,
email: email,
phone: phone,
bio: bio,
},
success:
function (data) {
$(".team-modal__content").empty();
$(".team-modal__content").append(
"<div class='team-modal__container'>" +
"<button class='modal-button'><span></span><span></span></button>" +
"<div class='team-modal__image-wrapper'>" +
"<img class='team-modal__image' src=" + image + ">" +
"</div>" +
"<div class='team-modal__info-wrapper'>" +
"<h3 class='team-modal__name'>" + name + "</h3>" +
"<h5 class='team-modal__title'>" + title + "</h1>" +
"<a class='team-modal__email' href=mailto:" + email + ">" + email + "</a>" +
"<a class='team-modal__phone' href=tel:" + phone + ">" + phone + "</a>" +
"<div class='team-modal__bio'>" +
bio +
"</div>" +
"</div>" +
"</div>"
);
},
error: function (error) { console.log(error) },
});
1条答案
按热度按时间7d7tgy0s1#
显示
<pre>
元素中的内容或在容器上设置CSS属性white-space: pre-wrap
,以便正常显示空白。