jquery - 如何以正确的方式获取 jQuery 索引列表项

Question

我有以下代码，其中点击打开右侧的相关文章时会列出标题链接。默认显示第一篇文章，其他文章隐藏，直到单击下一个标题。我所拥有的是默认文章按我想要的方式显示，但点击标题链接时显示的文章顺序错误。

$(function codeAddress() {
  $('.posts-box').html($('.hidden-posts ul li div article:eq(' + $('.test-titles ul li div').index($(this).parent()) + ')').html());
  window.onload = codeAddress;

  $('a').click(function() {
    $('.posts-box').html($('.hidden-posts ul li div article:eq(' + $('.test-titles ul li div').index($(this).parent()) + ')').html());
  });
});

.hidden {
  display: none;
}

.site-main {
  display: grid;
  grid-column-gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.half {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="site-main">
  <div class="half test-titles">
    <ul>
      <li>
        <div>
          <a href="#" title="Test post Two">Test post Three</a>
        </div>
      </li>
      <li>
        <div>
          <a href="#" title="Test post Two">Test post Two</a>
        </div>
      </li>
      <li>
        <div>
          <a href="#" title="Test post one">Test post one</a>
        </div>
      </li>
      <li>
        <div>
          <a href="#" title="Hello world!">Hello world!</a>
        </div>
      </li>
    </ul>
  </div>
  <div class="hidden hidden-posts">
    <ul>
      <li>
        <div>
          <article>
            <header class="entry-header">
              <h2>Hello world!</h2>
            </header>
            <div class="entry-content">
              <p>Ugh four dollar toast cray authentic single-origin coffee brooklyn put a bird on it, intelligentsia hashtag vaporware lumbersexual yuccie occupy. Church-key man bun biodiesel, shaman disrupt single-origin coffee meggings lyft leggings. Listicle
                street art tumblr twee heirloom, scenester whatever master cleanse viral la croix umami pickled typewriter affogato. Vaporware celiac fanny pack</p>
            </div>
          </article>
        </div>
      </li>
      <li>
        <div>
          <article>
            <header class="entry-header">
              <h2>Test post one</h2>
            </header>
            <div class="entry-content">
              <p>Direct trade YOLO chia art party authentic, tumeric pok pok vinyl iPhone +1 palo santo. Jean shorts pop-up banjo freegan, thundercats chambray mumblecore heirloom. Seitan 8-bit yr.</p>
            </div>
          </article>
        </div>
      </li>
      <li>
        <div>
          <article>
            <header class="entry-header">
              <h2>Test post Two</h2>
            </header>
            <div class="entry-content">
              <p>Put a bird on it tousled you probably haven&#8217;t heard of them intelligentsia affogato chia health goth. Taiyaki kickstarter pinterest, twee distillery listicle chartreuse gentrify iPhone literally photo booth leggings kale chips.</p>
            </div>
            <!-- .entry-content -->
          </article>
        </div>
      </li>
      <li>
        <div>
          <article>
            <header class="entry-header">
              <h2>Test post Three</h2>
            </header>
            <div class="entry-content">
              <p>Tbh sriracha ramps taiyaki YOLO seitan hoodie farm-to-table cornhole waistcoat beard dreamcatcher godard affogato. Air plant stumptown you probably haven&#8217;t heard of them</p>
            </div>
            <!-- .entry-content -->
          </article>
        </div>
      </li>
    </ul>
  </div>
  <div class="half">
    <article class="posts-box">
    </article>
  </div>

我知道我可能可以做些事情让 JS 更整洁，但我想先让它正常工作。

查看jsfiddle .

谢谢

Answer 1

我建议使用这个函数:

$(function codeAddress() {
    var postBox = $('.posts-box');
    var articleHeaders = $('.entry-header');
    function getPostContent(post){
        var content = '';
        articleHeaders.each(function(){
            var h1 = $(this).find('h2'); 
            if(post.html()==h1.html()){
                content = $(this).parent().html();
            }
        });
        postBox.html( content);
    }
    $('a').click(function() { 
        getPostContent($(this));       // get content by link title
    }); 
    getPostContent($('a').eq(0));      // if you want initial content
});

https://codepen.io/FaridNaderi/pen/WOMBaL

虽然这不是最好的方法，但希望它能帮助您解决代码问题。