使用 PHP 和 jQuery 更改克隆内容

Question

在模板中，我想将“#content-standard”的内容克隆到#content-blue。这是在 jQuery 中完成的并且工作正常。克隆的内容具有不同的样式，在其新父级中设置 class "new-bgcolor".

HTML

<div class="content-wrapper">
<div class="content-container-main">    
    <div id="content-blue" class="new-bgcolor"> 
    </div>
</div>    
<div id="content-standard">
    <main id="front-page" role="main">
    <?php $args = array('posts_per_page'=>1,'cat=-2'); 
        if(!isset($loopfront)){ $loopfront='';} $loopfront = new WP_Query($args); 
        while ( $loopfront->have_posts() ) { $loopfront->the_post(); get_template_part( './parts/content', 'page' );}unset($loopfront); ?>
    </main>             
</div>

但是克隆之后，我需要替换其中的某部分内容以匹配来自 new-bgcolor 的新样式。

content-standard 中的内容是通过获取文件夹部分中的主题部分内容-page.php 生成的。对于 div content-blue 中的 content-standard，我需要加载另一个模板部分，它加载一个函数。此函数的作用是使用 iMagick 脚本克隆和更改上传的图像并扩展名称，以便更改后的图像不会覆盖原始图像。

所以带有#content-standard" 的模板部分 "content-page.php" 加载图像 "//localhost:3000/content/uploads/2017/09/image.jpg"，模板部分 "content-page_blue.php" 应该加载 "// localhost:3000/content/uploads/2017/09/image-blurred.jpg"

content-page_blue.php通过该函数获取模糊图像

<?php $page = get_post(); $image_alt = get_post_meta( $page->ID, '_wp_attachment_image_alt', true); $featured = wp_get_attachment_image( get_post_thumbnail_id($page->ID), 'full' ); $thumb_id = get_post_thumbnail_id();  $thumb_url = wp_get_attachment_image_src($thumb_id,'thumbnail-size', true); $path = pathinfo($thumb_url[0]); $extension = pathinfo($thumb_url[0], PATHINFO_EXTENSION); $newfilename = $path['filename']."-blurred"; $newfile = $path['dirname']."/".$newfilename.".".$extension; $thumbs = get_field('thumbs', $page->ID);?><?php if($featured) { ?> <div id="post-featured-<?php echo $post->ID; ?>" class="post-image"><a href="<?php the_permalink(); ?>"><img src="<?php echo $newfile; ?>"/></a><p><?php echo get_post(get_post_thumbnail_id())->post_excerpt;?></p></div><?php } ?>

这也经过测试，在之前的设置中运行良好。新设置的问题是我似乎无法在克隆的 div 中加载 "content-page_blue.php"。我对 jQuery 的了解有限，我使用了这个：

$("#content-standard").clone().appendTo("#content-blue"); var newContent = $('#content-blue').siblings('#content-standard'); $('#content-blue').load("parts/content-page_blue.php" + newContent);

它找不到模板部分并退回

404 Error http://localhost:3000/parts/content-page_blue.php

这可能与 WP Skeleton 设置（将内容和 WP 文件夹放在 public 文件夹中）以及加载脚本的页面与模板部分不同有关？它看起来像这样： theme setup. 感谢您提供任何帮助，对于冗长的故事，我们深表歉意。

Answer 1

我的一个朋友告诉我可以在 jQuery 中完全相同地完成 PHP 函数，而不是 PHP 函数。这是结果。

function swapImages() { var images = $('images-containing-div').find('img'); images.each(function( index ) { var src_name = $(this).attr('src') if ( src_name.length ) {  var temp_name = src_name.substring(0, src_name.length - 4); var new_name = temp_name + "-blurred.jpg"; $(this).attr('src', new_name); } });}  swapImages();

希望这对任何人都有帮助。

使用 PHP 和 jQuery 更改克隆内容

Changed cloned content with PHP and jQuery

wordpress

jquery

load