使用 PHP 和 jQuery 更改克隆内容答案

【问题标题】：Changed cloned content with PHP and jQuery使用 PHP 和 jQuery 更改克隆内容
【发布时间】：2017-09-18 11:02:46
【问题描述】：

在模板中，我想将“#content-standard”的内容克隆到#content-blue。这是在 jQuery 中完成的并且工作正常。克隆的内容具有不同的样式，该样式在其新父级中设置为“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 的新样式。

通过获取文件夹parts 中的主题部分content-page.php 生成来自content-standard 的内容。对于 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 错误http://localhost:3000/parts/content-page_blue.php

也许这与 WP Skeleton 设置（将内容和 WP 文件夹放在公共文件夹中）以及加载脚本的页面与模板部分不同有关？它看起来像这样： theme setup. 任何帮助表示感谢，并为长篇大论感到抱歉。

【问题讨论】：

newContent 是一个 jQuery object，你为什么要在 load 函数中连接它？
这个想法是将带有#content-standard的div指向父div##content-blue。这样做更好吗 $('#jl-gold').load("./parts/content-page_gold.php #jl-gold > #jl-standard"); ?发布此内容后，我了解到该路径是相对于加载脚本的页面的，因此我应该找到一种重定向到另一个文件夹的方法。如果有可能的话。
在load中，你可以从加载页面中的元素获取内容，但是你必须传递一个字符串，比如.load("mypage.php #elem")，现在你传入一个jQuery对象，然后结束与.load("mypage.php[object, Object]")相同
感谢您清除方法。应该相互通信的文件分散在不同的子文件夹中。加载方法仍然是最好的方法吗？
问题已解决。不幸的是，我没有找到上述方案的解决方案。也许 AJAX 是解决这个问题的方法，但是当有时间进行实验时，我会回到这个问题上。现在，我的方法从一开始就太复杂了。简而言之，我想使用 PH 函数在不同的 PHP 文件中使用，然后在声明该函数的位置并使用 jQueury 调用它。我几乎不知道，我可以在 jQuery 中编写一个类似的函数，它可以很容易地调用任何想要的元素。

标签： jquery wordpress load

【解决方案1】：

我的一个朋友告诉我，不用 PHP 函数，它可以在 jQuery 中完全一样地完成。结果如下。

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();

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

【讨论】：