Question

挑战：在ID为揭示的DIV内从WordPress加载单个帖子

成功案例： 使用以下JS，我可以将主元素及其子元素拉入显示div。

$(function() {                                     // DOM has loaded
  var $modal = $('#reveal');
  function loadContent(url){                    // Load new content into page
    $modal.load(url + ' #main *').foundation('open');
  }

  $('[data-reveal-ajax]').on('click', function(e) {     // Click handler 
    e.preventDefault();                         // Stop link loading new page
    var href = this.href;                       // Get href attribute of link
    var $this = $(this);                        // Store link in jQuery object
    loadContent(href);                          // Call function: loads content

    console.log('On Click works');
    console.log(href);
    console.log($this);
  });
});

然而，输出是意料之外的。它不是将main及其所有子项直接放入模态中，而是重写HTML父/子关系，如下所示：

使用上面的jQuery AJAX注入HTML（破碎/意外）：

<main id="main" class="page-body" role="main" style="display: flex;"><article id="post-1241" class="post-1241 post type-post status-publish format-standard hentry category-uncategorized tag-sticky-2 tag-template">
    
  <!-- .entry-header -->

  <!-- .entry-content -->

  
  <!-- .entry-footer -->
</article><header id="entryTitle" class="entry-header">
        <!-- .entry-meta -->
      </header><h1 class="entry-title">Template: Sticky</h1><div class="entry-meta">
          </div><span class="posted-on">Posted on </span><a href="http://wordpress/template-sticky/" rel="bookmark"></a><time class="entry-date published updated" datetime="2012-01-07T07:07:21+00:00">January 7, 2012</time><span class="byline"> by </span><span class="author vcard"></span><a class="url fn n" href="http://wordpress/author/glenn-philp/">Glenn Philp</a><div class="entry-content">
    


<!-- @end Related Post -->  </div><p>This is a sticky post.</p><p>There are a few things to verify:</p><ul>




</ul><li>The sticky post should be distinctly&nbsp;recognizable&nbsp;in some way in comparison to normal posts. You can style the  class if you are using the  function to generate your post classes, which is a best practice.</li><code>.sticky</code><a title="WordPress Codex post_class() Function" href="http://codex.wordpress.org/Function_Reference/post_class" target="_blank">post_class()</a><li>They should show at the very top of the blog index page, even though they could be several posts back chronologically.</li><li>They should still show up again in their chronologically correct postion in time, but without the sticky indicator.</li><li>If you have a plugin or widget that lists popular posts or comments, make sure that this sticky post is not always at the top of those lists unless it really is popular.</li><section id="related-posts" class="related-posts"></section><a href="#" class="get-related-posts button">Get related posts</a><footer class="entry-footer">
      </footer><span class="cat-links">Posted in </span><a href="http://wordpress/category/uncategorized/" rel="category tag">Uncategorized</a><span class="tags-links">Tagged , </span><a href="http://wordpress/tag/sticky-2/" rel="tag">sticky</a><a href="http://wordpress/tag/template/" rel="tag">template</a><nav class="navigation post-navigation" role="navigation">
		
		
	</nav><h2 class="screen-reader-text">Post navigation</h2><div class="nav-links"></div><div class="nav-previous"></div><a href="http://wordpress/template-password-protected/" rel="prev"></a><span class="meta-nav" aria-hidden="true">Previous</span><span class="show-for-sr">Previous post:</span><span class="post-title">Template: Password Protected (the password is “enter”)</span><div class="nav-next"></div><a href="http://wordpress/template-paginated/" rel="next"></a><span class="meta-nav" aria-hidden="true">Next</span><span class="show-for-sr">Next post:</span><span class="post-title">Template: Paginated</span></main>

单个帖子HTML（预期）：

<main id="main" class="page-body" role="main">

    
<article id="post-1241" class="post-1241 post type-post status-publish format-standard hentry category-uncategorized tag-sticky-2 tag-template">
    
  <header id="entryTitle" class="entry-header">
    <h1 class="entry-title">Template: Sticky</h1>    <div class="entry-meta">
      <span class="posted-on">Posted on <a href="http://wordpress/template-sticky/" rel="bookmark"><time class="entry-date published updated" datetime="2012-01-07T07:07:21+00:00">January 7, 2012</time></a></span><span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://wordpress/author/glenn-philp/">Glenn Philp</a></span></span>    </div><!-- .entry-meta -->
      </header><!-- .entry-header -->

  <div class="entry-content">
    <p>This is a sticky post.</p>
<p>There are a few things to verify:</p>
<ul>
<li>The sticky post should be distinctly&nbsp;recognizable&nbsp;in some way in comparison to normal posts. You can style the <code>.sticky</code> class if you are using the <a title="WordPress Codex post_class() Function" href="http://codex.wordpress.org/Function_Reference/post_class" target="_blank">post_class()</a> function to generate your post classes, which is a best practice.</li>
<li>They should show at the very top of the blog index page, even though they could be several posts back chronologically.</li>
<li>They should still show up again in their chronologically correct postion in time, but without the sticky indicator.</li>
<li>If you have a plugin or widget that lists popular posts or comments, make sure that this sticky post is not always at the top of those lists unless it really is popular.</li>
</ul>
<section id="related-posts" class="related-posts"><a href="#" class="get-related-posts button">Get related posts</a></section><!-- @end Related Post -->  </div><!-- .entry-content -->

  
  <footer class="entry-footer">
    <span class="cat-links">Posted in <a href="http://wordpress/category/uncategorized/" rel="category tag">Uncategorized</a></span><span class="tags-links">Tagged <a href="http://wordpress/tag/sticky-2/" rel="tag">sticky</a>, <a href="http://wordpress/tag/template/" rel="tag">template</a></span>  </footer><!-- .entry-footer -->
</article><!-- #post-## -->

	<nav class="navigation post-navigation" role="navigation">
		<h2 class="screen-reader-text">Post navigation</h2>
		<div class="nav-links"><div class="nav-previous"><a href="http://wordpress/template-password-protected/" rel="prev"><span class="meta-nav" aria-hidden="true">Previous</span><span class="show-for-sr">Previous post:</span><span class="post-title">Template: Password Protected (the password is “enter”)</span></a></div><div class="nav-next"><a href="http://wordpress/template-paginated/" rel="next"><span class="meta-nav" aria-hidden="true">Next</span><span class="show-for-sr">Next post:</span><span class="post-title">Template: Paginated</span></a></div></div>
	</nav>
  </main>

有人可以就如何解决这个问题提供指导吗？

Answer 1

如果没有代码的工作版本，很难帮助你，但这里什么都没有。有一件事你可以（我会）试图找出这一切都出错的地方。

步骤1：首先使用.load而不发送元素（在您的情况下，它是＆＃39; main＆＃39;）并测试是否所有内容都正确返回。改变这个：

$modal.load(url + ' #main *').foundation('open');

到此：

$modal.load(url).foundation('open');

步骤2：现在，如果结果符合您的预期（加载的网址中的所有HTML），我们就可以继续。

第3步：现在试试这样：

$modal.load(url + ' #main').foundation('open');

我希望这也能达到你所期望的效果，它将使用＆＃39; main＆＃39;返回元素中的所有内容。 ID。

这是我修复它的方法，因为我认为问题出在*选择器中。

就我个人而言，我会尝试这样的事情（未经过全面测试）：

$.ajax({
  url: 'https://www.google.nl/',
  success: function(data) {
    $('#myDiv').html($(data).filter('#lipsum').html());
  }
});

Wordpress和AJAX模态

1 个答案: