将递增的类与不同循环中递增的id进行匹配[jQuery/Wordpress]
Match incremented class with incremented ids from different loops [jQuery / Wordpress]
经过数小时的研究和反复尝试,我在这里开始了我的第一个问题。如果可以用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>
第一个查询用于按段塞过滤类别。
我的最后一次尝试感觉很近。。
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();
});
相关文章:
- Wordpress中带有JQuery Accordion的未定义匿名函数
- 如何在WordPress的头中加载自定义jQuery
- 如何在category.php中执行jquery,这应该适用于类别wordpress中的每个帖子
- jQuery is not defined - WordPress footer.php
- 自定义jQuery脚本无法在Wordpress上运行
- 在WordPress站点中加载jquery.js后加载javascript代码
- 将Jquery与wordpress主题一起使用
- 在wordpress中找不到jQuery函数
- Wordpress 3级水平导航-需要jquery/javascript帮助进行对齐
- 通过Wordpress中的jquery调用运行php文件
- Wordpress AJAX with raw javascript? NO Jquery
- Jquery在wordpress内容中不起作用
- 为什么这个jQuery图像映射在WordPress上不起作用
- 无法使用jquery(WordPress,层滑块)找到DOM元素
- 将递增的类与不同循环中递增的id进行匹配[jQuery/Wordpress]
- Jquery wordpress 内容加载
- 修复了浮动元素jQuery WordPress
- wp_localize_script 带句柄 jquery - WordPress 脚本
- jquery,Wordpress隐藏元素时,浏览器是一定的宽度
- JQuery Wordpress enqueue脚本不工作