在点击每个帖子特色图片时添加一行

时间：2016-01-15 作者：rajwa766

单击缩略图时，我必须在帖子缩略图下方添加一行（包含帖子内容）。我已经用这个做了，但它会影响相邻的帖子缩略图。我想，一个完整的行被添加到每个职位下面，而不影响其他职位。每个帖子的缩略图应该保持不变。

<?php
$args = array(\'post_type\' => \'team\', \'category_name\' => $a);
$query = new WP_Query($args);
if ($query->have_posts()) {
    while ($query->have_posts()) {
        $query->the_post();
        ?>                       
        <div class="tab_heading col-md-4">
            <div class="wrapper">
                <a href="#tab-<?php echo get_the_id(); ?>">
                    <div class="bg_image">
                        <?php the_post_thumbnail(); ?>
                    </div>
                </a>
                <p class="title-post"> 
                    <?php the_title(); ?>
                </p> 

            </div>
        </div>
<div class="tab" style="">
        <div id="tab-<?php echo get_the_ID(); ?>" class="tab-content">
            <div class="row">
                <?php the_content(); ?>
            </div>
        </div>
</div>
        <?php
    }
}
wp_reset_query();
?>
这是我想要的设计图。enter image description here

当我点击时我想要它sofia 我添加了一行，其中包含特定帖子的\\u内容。我的英语很抱歉。

2 个回复
最合适的回答,由SO网友:certainstrings 整理而成

如果您使用@Rituparna的解决方案，请尝试以下方法：

别忘了添加<a href="#" class="close">X</a> 在您的容器中。

jQuery(function($){
    $(".plink").on(\'click\', function( event ){

        event.preventDefault();

        // cache the link clicked on
        var link = $(event.target);

        // use the link attr to target the desc
        var containerID = link.attr(\'href\');

        // get the description contained in the link
        var desc = link.find(\'.member-desc\');

        // send the member content to the container
        $(containerID +\' #desc_holder\').html(desc);

    });

    // functionality for the close button
    $(\'.close\').on(\'click\', function( event ) {

        event.preventDefault();

        $(\'#desc_holder\').html(\'\');
    }
});

SO网友:Rituparna sonowal

<div class="row">
<?php
$args = array(\'post_type\' => \'team\', \'category_name\' => $a);
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
?>                       
<div class="tab_heading col-md-4">
<div class="wrapper">
<a class="plink" href="#tab-<?php echo get_the_id(); ?>">
<div class="bg_image">
<?php the_post_thumbnail(); ?>
</div>
<div class="member-desc" style="display:none;">
<?php the_content(); ?>
</div>
</a>
<p class="title-post"> 
<?php the_title(); ?>
</p>
</div>
</div>
<?php
}
}
wp_reset_query();
?>
</div>
<div class="tab" style="">
<div id="tab-<?php echo get_the_ID(); ?>" class="tab-content">
<div class="row">
<div class="col-md-12" id="desc_holder">
<!-- default contents -->
</div>
</div>
</div>
</div>
我不认为你的html结构可以达到预期的效果！！我对结构做了一些修改。现在，您可以轻松地从中复制内容。单击缩略图并添加到#desc\\u holder div时，显示member desc（无）。

<script type="text/javascript">
jQuery(function($){
$(".plink").on(\'click\', function(){
var txt = $(this + " .member-desc").html();
$("#desc_holder").empty().html(txt);
});
});
</script>
我不确定jquery代码，但希望这能让您了解我正在做的事情。

标签： plugin-development   jquery   小码农  

相关推荐

JQuery php请求返回一个奇怪的结果

我有一个奇怪的小故障发生在我身上，我不知道我是如何产生它的，或者它是否是正常的。我正在开发自己的插件，当一个足球队/足球队被输入到一个框中时，它会检查它是否已经在数据库中。以下是我的代码行add_action( \'admin_footer\', \'fws_teamcheck_javascript\' ); function fws_teamcheck_javascript() { ?> <script type="text/javascript">