javascript - 带有具有特定属性的复选框的切换元素

Question

所以我有一个按标题排序的子页面列表。我正在使用自定义字段 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(); 
                                });

Answer 1

如果你可以访问 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>