Question

我正在使用WordPress并尝试使用JQuery替换div的内容 - 这一点有效。但是，内容中包含一个URL，但它不起作用，我看不出原因。

我在PHP中生成变量：

$query = new WP_Query( array( 'category_name' => 'news' ) );
if ( $query->have_posts() ) {
    // The Loop
    while ( $query->have_posts() ) {
        $query->the_post();
        $news_item = '<h2>' . get_the_title() . '</h2>';
        $news_item .= get_the_excerpt();    
        $news_item .= "<BR>";
        $news_item .= "<a href=";
        $news_item .= get_permalink();
        $news_item .= ">";      
        $news_item .= "Read More...</a>";
    }
    wp_reset_postdata();
}

这一点有效。

我把它放到jQuery变量中：

<script type="text/javascript"> 
<?php  
    echo "var newsItem = '{$news_item}';";
?>

jQuery(document).ready(function() {
    jQuery('#soap-frontpagenews').fadeOut(500, function() {
        jQuery(this).replaceWith(newsItem).fadeIn(500);
    });
});
</script>

这个位有效。但是，生成的HTML代码不能正确生成链接的方式：

<h1>News</h1>
<h2>Taking Better Photos With Your Nikon</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum ac urna et auctor. at…
<br>
<a href="http://212.159.165.84/~soapwp/2013/09/29/taking-better-photos-with-your-nikon"></a>
Read More...

中的Read More ...在链接标签外面。

我哪里出错了？

最好的问候

戴夫

Answer 1

问题：

你的字符串坏了，因为缺少一个引号。你需要将url包装成一个带引号的字符串。

所以你的代码是这样的：

$query = new WP_Query( array( 'category_name' => 'news' ) );
if ( $query->have_posts() ) {
    // The Loop
    while ( $query->have_posts() ) {
        $query->the_post();
        $news_item = '<h2>' . get_the_title() . '</h2>';
        $news_item .= get_the_excerpt();    
        $news_item .= "<BR>";
        $news_item .= "<a href='";
        $news_item .= get_permalink();
        $news_item .= "'>";      
        $news_item .= "Read More...</a>";
    }
    wp_reset_postdata();
}

Javascript代码（更新代码）

<script type="text/javascript"> 
var newsItem = "<?php echo $news_item; ?>"; // Variable assignment 

jQuery(document).ready(function() {
    jQuery('#soap-frontpagenews').fadeOut(500, function() {
        jQuery(this).replaceWith(newsItem).fadeIn(500);
    });
});
</script>

更新：

变量应引用var newsItem = "<?php echo $news_item; ?>";

Answer 2

如果将PHP变量分配给Javasript变量，最好使用json_encode()：

<script type="text/javascript"> 
<?php  
    echo "var newsItem = " . json_encode( $news_item ) . ";";
?>

但我会以另一种方式执行此操作：您可以将所有新闻项直接从PHP放入带有display: none的HTML div容器中，然后使用jQuery管理新闻轮换。

Javascript / JQuery用带有URL的内容替换div

2 个答案: