经过几个小时的研究和尝试和错误,我在这里开始我的第一个问题。 如果能用 wordpress 语法来完成就更好了。否则我认为我已经接近解决方案了。
我想要在 WordPress 模板页面上有一个自定义图库,但包含来自某些类别的帖子图像及其内容。到目前为止一切顺利。
在我的 Designerin.php 模板中,我为每个图像指定了一个类 img-x。
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 代码:
$(".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();
});
var imgContent 只是一个测试。每张图像都显示当前图像 5 中的内容。 我的模板页面代码:
<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>
第一个查询用于按 slug 过滤类别。
我的最后一次尝试感觉如此接近......
var inc = '5';
var objClass = $(this).find("a").hasClass( "img-" + inc );
console.log(objClass);
当我点击第五张图片时,我得到了“true”。但是我怎样才能获得与我的模板 php 代码相关的 X (inc) 呢?
抱歉我的英语和可能的错误代码
最佳答案
如果我理解正确,这可能会有所帮助
$('.gallery li').on('click', function(e) {
e.preventDefault();
var className = $(this).find('a').attr('class');
var imgContent = $('#'+className).html();
});
关于javascript - 将递增的类与不同循环中递增的 id 进行匹配 [jQuery/Wordpress],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28528526/