如何以正确的方式对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

虽然这不是最好的方法，但希望它可以帮助您解决代码情况。