[英]Toggle element with checkbox with certain attribute
因此,我有按标题排序的子页面列表。 我正在使用自定义字段wordpress插件。
这是该li元素的内容之一
<p>City: <?php the_field('city',$page->ID); ?></p>
我要选择一个复选框(在页面上的某个位置),以便取消选中该复选框时,带有诸如city = NewYork的元素将消失。
到目前为止的代码:
<input type="checkbox" class="newyork" name="beograd" checked>Chicago<br>
<input type="checkbox" class="cicago" name="Chicago" checked>Pancevo<br>
<?php
$mypages = get_pages( array( 'child_of' => $post->ID, 'meta_value' => '', 'sort_column' => 'city', 'sort_order' => 'asc' ) );
foreach( $mypages as $page ) {
$content = $page->post_content;
if ( ! $content )
$content = apply_filters( 'the_content', $content );
?>
<li class="clan">
<a class="noselect"><?php the_field('naziv',$page->ID); ?></a>
<div class="clan_content">
<div class="podaci">
<p>City: <?php the_field('city',$page->ID); ?></p>
</div>
</li>
<?php
}
?>
成功
添加了<li class="clan" title="<?php the_field('city',$page->ID); ?>">
接着
$(function () {
$('#newyork').change(function () {
$(".clan_content").stop().slideUp();
$("[title=NewYork]").toggle(this.checked);
}).change();
});
如果您可以访问jQuery,则可能会发生这种情况。 而且可以将其扩展为将键和值设置为属性,因此它并不是那么硬编码。
$(function(){ // Listen for a filter click $('.stateFilter').click(function(){ var ref = $(this), // The input state = ref.attr('state'), // The state I want to filter states = $('div.state[state='+state+']'); // What I should filter if (ref.is(':checked')) { // If checked, show, otherwise hide states.show(); } else { states.hide(); } }); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="state" state="newYork">New York</div> <div class="state" state="newYork">Pittsford</div> <div class="state" state="newYork">Rye</div> <div class="state" state="alabama">Birmingham</div> <div class="state" state="alabama">Montgomery</div> <div class="state" state="alabama">Auburn</div> <hr/> <!-- Create Filters for Each Key you want to filter on, here I added a state attribute to the input tags, which I can reference from jQuery --> <p> <input class="stateFilter" type="checkbox" state="newYork" label="check_newYork" checked/> <label for="check_newYork">Show <b>New York</b> Cities</label> </p> <p> <input class="stateFilter" type="checkbox" state="alabama" label="check_alabama" checked/> <label for="check_alabama">Show <b>Alabama</b> Cities</label> </p>
我又刺了一下最新信息。 我将php转换为html应该是什么,但是我不确定它是否可以实现所有功能。 而且我需要添加更多属性来简化所有操作。
$(function(){ // Auto-Generate checkboxes and sort them, via jQuery magic var cities = [], cityMap = {}, i, city, clan_filters = $('#clan_filters'), p, items; // Collect cities, eliminate duplicates $('#clans li.clan').each(function(){ var ref = $(this), city = ref.attr('city'); // Make sure we don't duplicate the cities by using maps if (!cityMap[city]) { // If I haven't see this city, update the make and list cityMap[city] = true; cities.push(city); } }); // Clean out the map, not needed cityMap = undefined; // Build the checkboxes for (i = 0; i < cities.length; i++) { city = cities[i]; p = $('<p></p>').appendTo(clan_filters); p.append($('<input type="checkbox" class="clan_filter" checked/>').attr('value', city)); p.append($('<span></span>').text(city)); } // Get this reference to save time items = $('p', clan_filters); // Sort the chjeckboxes items.sort(function(a,b){ var keyA = $(a).text(); var keyB = $(b).text(); if (keyA < keyB) return -1; if (keyA > keyB) return 1; return 0; }); // Re-attached the sorted items, but this time in order $.each(items, function(i, li){ clan_filters.append($(li)); }); // Event Handlers $('input.clan_filter[type=checkbox]', clan_filters).change(function(){ var ref = $(this), // The input checked = ref.prop('checked'), // Am i checked? city = ref.val(); // What city is this for? $('#clans li.clan[city='+city+']').toggle(checked); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="clan_filters"> </div> <!-- Commenting out code since this needs to be html <ul id="clans"> <?php $mypages = get_pages( array( 'child_of' => $post->ID, 'meta_value' => '', 'sort_column' => 'city', 'sort_order' => 'asc' ) ); foreach( $mypages as $page ) { $content = $page->post_content; if ( ! $content ) $content = apply_filters( 'the_content', $content ); ?> <li class="clan" city="<?php the_field('city',$page->ID); ?>"> <a class="noselect"><?php the_field('naziv',$page->ID); ?></a> <div class="clan_content"> <div class="podaci"> <p>City: <?php the_field('city',$page->ID); ?></p> </div> </div> </li> <?php } ?> </ul> --> <!-- This is what I think the output should look like --> <ul id="clans"> <li class="clan" city="Pancevo"> <a class="noselect">What is this? B</a> <div class="clan_content"> <div class="podaci"> <p>City: Pancevo</p> </div> </div> </li> <li class="clan" city="Chicago"> <a class="noselect">What is this? A</a> <div class="clan_content"> <div class="podaci"> <p>City: Chicago</p> </div> </div> </li> <ul>
您应该可以使用jQuery做到这一点
$('checkbox').click(function () {
if(!$(this).is(':checked')) {
$('[city="New York"]').hide();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.