在 Wordpress 循环中展开的复选框

Question

我为我的 Wordpress 循环创建了自己的样式，它在 Bootstrap 脚手架中显示 10 个最近 post 的图像。

每张图片都有一个标签，您可以单击它来展开信息。但是，无论您单击哪个复选框，它只会打开和关闭循环中的第一个 post。

我已经尝试将 li 和子 li 值分配给 css 并将复选框标签进一步移动到循环中。到目前为止没有任何帮助。我确信这与以下事实有关，因为它在循环中，所以我无法将每个复选框分配给特定的 post。只有一个[for="check"]

这个复选框的想法可行吗？

HTML:

<li class="<?php echo $span; ?>">

      <?php
echo '<div class="postexpander"><label for="check"><div class="postarrow"> <p>Expand Info <span class="glyphicon glyphicon-plus"></span></p></div></label>';
echo '<input id="check" type="checkbox">';
echo '<div class="posttext" onclick="posttext:hover">';
echo '<p class="posthead">';
echo '<a href="' . get_permalink( $thumbnail->ID ) . '" title="' . esc_attr( $thumbnail->post_title ) . '">'; 
the_title();
echo '</a>';
echo '</p><p class="postdate">';
the_date('F jS, Y');
echo '</p><p class="postcontent">';
$content = get_the_content();
$trimmed_content = wp_trim_words( $content, 15,"...".'<p class="readmore"> <a href="'. get_permalink() .'">Read More</a>' );
echo $trimmed_content;
echo '</p>';
echo '</div></div>';
if(has_post_thumbnail()) {                    
$image_src = the_post_thumbnail( 'custom-size', array( 'class' => "postimage" ) );
    echo '<a href="' . get_permalink( $thumbnail->ID ) . '" title="' . esc_attr( $thumbnail->post_title ) . '">';
    echo '</a>';}?> 

</li>    
<?php
 //End the post loop
 endwhile; else:
?>

CSS:

.postroll .col-md-6 img {
    max-height:400px;
    min-width: 200px;
    margin: -5px 0px -5px 0px;
}
.postroll .col-md-3 img {
 max-height:200px;
    min-width: 100px;
}
.col-md-6 {
    padding: 0px !important;
}
.row {
    clear: both;}
.postimage {
    text-decoration: none;
    opacity:.5;
    width: 100%;
    height: auto;
    padding: 5px 0 5px 0;
    filter: grayscale(50%);
}
.postexpander {
    opacity:1;
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: right;
    z-index: 5;
}
.postexpander:hover ~ .postimage {
    opacity: 1;
    filter: grayscale(0%);
    webkit-box-shadow: 0px 0px 76px -16px rgba(34,35,36,1);
-moz-box-shadow: 0px 0px 76px -16px rgba(34,35,36,1);
box-shadow: 0px 0px 76px -16px rgba(34,35,36,1);
}
.posttext {
    opacity:0;
    width: 0px;
    height: 100%;
    margin-left: 100%;
    top:0;
    overflow:hidden;
    position: absolute;  
    background:rgba(255,255,255,0.95);      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);  
    zoom: 1;
    z-index: 1;
}
.postroll input {
  display: none;
}
.postarrow {
    font-size: 12px;
    text-align: center;
    padding: 5px;
    width: 40px;
    height: 100%;
    text-align: right;
    margin-left: 90%;
    background-color: rgba(51, 68, 122, 1);
    border-left: 3px solid #13EBC7;
    float: right;
  display:block;
}
.postarrow p{
    color:white;
    font-size: 100%;
    width: 120px;
    height:20px;
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    -moz-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -ms-transform-origin:  50% 270%; /* IE 9 */  
    -webkit-transform-origin:  50% 270%; /* Chrome, Safari, Opera */
    transform-origin: 50% 270%;
}

.postroll label:hover .postarrow {
  background: #3498db;
}

input:checked + .posttext {
  opacity:1;
  width:100%;
  margin-left:0%;
}

.posthead {
    color: #0587F2;
    font-size: 200%;
    font-weight: bolder;
    float:left;
    text-align:right;
    margin-top: -2px;
    padding: 5px;
    width: 60%;
    height: 100%;
    vertical-align: top;
    display: block;
    overflow: hidden;
    border-right: 3px solid #13EBC7;
    z-index:2;
}
.postdate{
    color:#5C5C5C;
    float: right;
    font-style: italic;
    text-align: left;
    width: 40%;
    height: 30%;
    vertical-align: top;
    padding: 10px 25px 10px 5px;
}
.postcontent{
    margin-top: -20px;
    padding: 10px 25px 10px 5px;
    float: right;
    color:#8A8A8A;
    text-align: left;
    width: 40%;
    height: 70%;
}
.readmore {
    visibility: hidden;
    float: right;
    text-align: right;
    vertical-align: text-bottom;
    vertical-align: bottom;
}

.postarrow, .posttext, .posthead, .postimage, .readmore, 
.postroll input, input:checked + .posttext, input .posttext, .postarrow, label:hover .postarrow 
{
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

在图片中您可以看到，即使我点击了信息选项卡（悬停时为浅蓝色），它也会扩展其上方 post 上的文本： http://bit.ly/1CYkYjd

Answer 1

好的，我明白了！就这么简单。

而不是：

<label for="check">
<input id="check" type="checkbox">

我必须使用：

<label for="'.get_the_ID().'">
<input id="'.get_the_ID().'" type="checkbox">

这样，就像我之前想的那样，每个 post 的复选框都被赋予了一个单独的值，并且它们都可以同时操作。

在 Wordpress 循环中展开的复选框

Checkbox that expands inside Wordpress Loop

css

php

wordpress

checkbox