将递增的类与来自不同循环的递增ID匹配[jQuery / Wordpress] [英] Match incremented class with incremented ids from different loops [jQuery / Wordpress]
问题描述
如果可以用wordpress语法来完成，甚至更好。否则我认为我接近解决方案。
我想在wordpress模板页面上使用自定义图库，但需要使用内容的特定图像在我的designerin.php模板中，我给每个图像一个类img-x。
$ b $ class =img-<？php echo $ img_counter;？>
内容获取id img-x
id =img- <？php echo $ post_counter; ？>
计数器只是一个增量。因此，图像1具有类img-1，图像2 img-2等等。
现在，我希望在单击此特定图像时显示在wordpress编辑器中创建的图像的相关内容。
假设您点击图片5并希望从图像5中获得内容。
我在我说的步骤（用jQuery）中显示内容
if .img-x ==＃img-x {
display the_content（）
}
足够说了 - 这是我的jQuery代码：
$ （ 大-IMG-包装）隐藏（）; （''click'，function（e）{
e.preventDefault（）;
var largeImgLink = $（this））
$（'。gallery li'）。 find（'a'）。attr（'href'）;
$（。large-img-wrapper）。first（）。fadeIn（）;
var imgContent = $（'＃img -5'）。html（）;
$（'＃large-img'）。remove（）;
$（'＃append-id'）。remove（）;
$（。large-img）。append（'< img id =large-imgsrc =''+ largeImgLink +'>'）。fadeIn（）;
$（ .large-img）。append（'< div id =append-id>'+ imgContent +'< / div>'）。fadeIn（）;
$（。large- img-container .img-title）。remove（）;
}）;
var imgContent只是一个测试。每张图片都显示了图片5中的内容。
我的模板页面代码：
< div class =row content full-width>
< div class =cats row>
< a href =＃class =sort-linkdata-category =Alle Kategorien> Alle Kategorien< / a>
<？php query_posts（'category_name = designerin& posts_per_page = -1'）; if（have_posts（））：while（have_posts（））：the_post（）;
$ categories = get_the_category（）;
$ separator ='';
$ output ='';
if（$ categories）{
foreach（$ categories as $ category）{
$ output。= $ category-> cat_name;
}
}
$ cat_name = get_category（get_query_var（'cat'）） - > name;
？>
< a href =＃class =sort-linkdata-category =<？php echo trim（$ output）;？>><？php echo trim（$ output ）; ？>< / A>
<？php endwhile; ？>
<？php endif; ？>
<？php wp_reset_query（）; ？>
< / div>
<？php $ img_counter = 0; ？>
<？php query_posts（'category_name = designerin& posts_per_page = -1'）; if（have_posts（））：while（have_posts（））：the_post（）;
$ img_counter ++;
$ thumb_id = get_post_thumbnail_id（）;
$ thumb_url_array = wp_get_attachment_image_src（$ thumb_id，'thumbnail'，true）;
$ large_url_array = wp_get_attachment_image_src（$ thumb_id，'large'，true）;
$ thumb_url = $ thumb_url_array [0];
$ large_url = $ large_url_array [0];
$ categories = get_the_category（）;
$ separator ='';
$ output ='';
if（$ categories）{
foreach（$ categories as $ category）{
$ output。= $ category-> cat_name;
}
}
？>
< li>
**< a href =<？php echo $ large_url;？> class =thumbnail img-<？php echo $ img_counter;？> data-categories =<？php echo trim（$ output）;？>>< img src =<？php echo $ thumb_url;？> alt =<？php echo the_title（）;？>>< / a> **
< / li>
<？php endwhile; ？>
<？php endif; ？>
<？php wp_reset_query（）; ？>
< / ul>
<？php $ post_counter = 0; ？>
<？php query_posts（'category_name = designerin& posts_per_page = -1'）; if（have_posts（））：while（have_posts（））：the_post（）;
$ post_counter ++;
？>
**< ul class =large-img-wrapper>
< li>
< div class =large-img-container>
< div class =large-img>< / div>
< div class =img-contentid =img-<？php echo $ post_counter;？>>
< div class =img-title>
<？php echo the_title（）; ？>
< / div>
< div class =img-text>
<？php echo the_content（）; ？>
< / div>
< / div>
< / div>
< / li>
< / ul> **
<？php endwhile; ？>
<？php endif; ？>
<？php wp_reset_query（）; ？>
< / div>
第一个查询用于通过slug过滤类别。
我的最后一次尝试感觉如此接近..
var inc ='5';
var objClass = $（this）.find（a）。hasClass（img-+ inc）;
console.log（objClass）;
当我点击第5张图片时，我会看到真实。但是我怎么能得到与我的模板php代码相关的X（inc）？
对不起，我的英文和可能的错误代码
如果我的理解正确，这可能会有所帮助
< $（'。gallery li'）。on（'click'，function（e）{
e.preventDefault（）;
var className = $（this）.find（' a'）。attr（'class'）;
var imgContent = $（'＃'+ className）.html（）;
}）;
After hours of research and try and errors I start my first question here. If it can be done with wordpress syntax even better. Otherwise I think I'm near to the solution.
I want a custom gallery on a wordpress template page but with the post image from certain categories with the content from it. So far so good.
In my designerin.php template I give every images a class img-x.
class="img-<?php echo $img_counter; ?>
And the content get the id img-x
id="img-<?php echo $post_counter; ?>
The counter is just an increment. So image 1 has class img-1, image 2 img-2 and so on. Now I want the related content of that image created in the wordpress editor showing up when you are clicking on this specific image.
Say you click on image 5 and want the content from image 5. I'm stucked on the step where I say (in jQuery), that display the content
if .img-x == #img-x {
display the_content()
}
Enough said - here is my jQuery code:
$(".large-img-wrapper").hide();
$('.gallery li').on('click', function(e) {
e.preventDefault();
var largeImgLink = $(this).find('a').attr('href');
$(".large-img-wrapper").first().fadeIn();
var imgContent = $('#img-5').html();
$('#large-img').remove();
$('#append-id').remove();
$(".large-img").append('<img id="large-img" src="' + largeImgLink + '">').fadeIn();
$(".large-img").append('<div id="append-id">' + imgContent + '</div>').fadeIn();
$(".large-img-container .img-title").remove();
});
The var imgContent was just a test. Every image shows up the content from image 5 at the moment. My template page code:
<div class="row content full-width">
<div class="cats row">
<a href="#" class="sort-link" data-category="Alle Kategorien">Alle Kategorien</a>
<?php query_posts( 'category_name=designerin&posts_per_page=-1'); if (have_posts()) : while (have_posts()) : the_post();
$categories = get_the_category();
$separator = ' ';
$output = '';
if($categories){
foreach($categories as $category) {
$output .= $category->cat_name;
}
}
$cat_name = get_category(get_query_var('cat'))->name;
?>
<a href="#" class="sort-link" data-category="<?php echo trim($output); ?>"><?php echo trim($output); ?></a>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
<ul class="row small-block-grid-3 medium-block-grid-5 large-block-grid-8 gallery">
<?php $img_counter = 0; ?>
<?php query_posts( 'category_name=designerin&posts_per_page=-1'); if (have_posts()) : while (have_posts()) : the_post();
$img_counter++;
$thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail', true);
$large_url_array = wp_get_attachment_image_src($thumb_id, 'large', true);
$thumb_url = $thumb_url_array[0];
$large_url = $large_url_array[0];
$categories = get_the_category();
$separator = ' ';
$output = '';
if($categories){
foreach($categories as $category) {
$output .= $category->cat_name;
}
}
?>
<li>
**<a href="<?php echo $large_url; ?>" class="thumbnail img-<?php echo $img_counter; ?>" data-categories="<?php echo trim($output); ?>"><img src="<?php echo $thumb_url; ?>" alt="<?php echo the_title(); ?>"></a>**
</li>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</ul>
<?php $post_counter = 0; ?>
<?php query_posts( 'category_name=designerin&posts_per_page=-1'); if (have_posts()) : while (have_posts()) : the_post();
$post_counter++;
?>
**<ul class="large-img-wrapper">
<li>
<div class="large-img-container">
<div class="large-img"></div>
<div class="img-content" id="img-<?php echo $post_counter; ?>">
<div class="img-title">
<?php echo the_title(); ?>
</div>
<div class="img-text">
<?php echo the_content(); ?>
</div>
</div>
</div>
</li>
</ul>**
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
The first query is for filtering the categories by slug.
My last attempt feels so near..
var inc = '5';
var objClass = $(this).find("a").hasClass( "img-" + inc );
console.log(objClass);
When I'm clicking on the 5th image I get "true". But how can I get the X (inc) related to my template php code?
Sorry for my english and possible bad code
If i'm understanding correctly this might help
$('.gallery li').on('click', function(e) {
e.preventDefault();
var className = $(this).find('a').attr('class');
var imgContent = $('#'+className).html();
});
这篇关于将递增的类与来自不同循环的递增ID匹配[jQuery / Wordpress]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
