切換元件與複選框某些屬性

Question

所以我有標題排序子頁面的列表中。我正在使用自定義字段wordpress插件。

這是

<p>City: <?php the_field('city',$page->ID); ?></p> 

我想讓複選框（某處頁）因此，如果您取消選中該複選框，將元素在li元素的含量的線路之一，可以說，城市=紐約，將消失。

到目前爲止的代碼：

     <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 
 
\t var cities = [], cityMap = {}, i, city, clan_filters = $('#clan_filters'), p, items; 
 
\t // Collect cities, eliminate duplicates 
 
\t $('#clans li.clan').each(function(){ 
 
\t \t var ref = $(this), city = ref.attr('city'); 
 
\t \t // Make sure we don't duplicate the cities by using maps 
 
\t \t if (!cityMap[city]) { // If I haven't see this city, update the make and list 
 
\t \t \t cityMap[city] = true; 
 
\t \t \t cities.push(city); 
 
\t \t } 
 
\t }); 
 
    // Clean out the map, not needed 
 
\t cityMap = undefined; 
 
    // Build the checkboxes 
 
\t for (i = 0; i < cities.length; i++) { 
 
\t \t city = cities[i]; 
 
\t \t p = $('<p></p>').appendTo(clan_filters); 
 
\t \t p.append($('<input type="checkbox" class="clan_filter" checked/>').attr('value', city)); 
 
\t \t p.append($('<span></span>').text(city)); 
 
\t } 
 
    // Get this reference to save time 
 
\t items = $('p', clan_filters); 
 
\t // Sort the chjeckboxes 
 
\t 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; 
 
\t }); 
 
\t // Re-attached the sorted items, but this time in order 
 
\t $.each(items, function(i, li){ 
 
     clan_filters.append($(li)); 
 
\t }); 
 
\t // Event Handlers 
 
\t $('input.clan_filter[type=checkbox]', clan_filters).change(function(){ 
 
\t \t var ref = $(this), // The input 
 
     checked = ref.prop('checked'), // Am i checked? 
 
     city = ref.val(); // What city is this for? 
 
\t \t $('#clans li.clan[city='+city+']').toggle(checked);  
 
\t }); 
 
});

<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 
 
\t $mypages = get_pages(array('child_of' => $post->ID, 'meta_value' => '', 'sort_column' => 'city', 'sort_order' => 'asc')); 
 

 
\t foreach($mypages as $page) {  
 
\t \t $content = $page->post_content; 
 
\t \t if (! $content) $content = apply_filters('the_content', $content); 
 
?> 
 
\t \t <li class="clan" city="<?php the_field('city',$page->ID); ?>"> 
 
\t \t \t <a class="noselect"><?php the_field('naziv',$page->ID); ?></a> 
 
\t \t \t <div class="clan_content"> 
 
\t \t \t \t \t <div class="podaci"> 
 
\t \t \t \t \t \t <p>City: <?php the_field('city',$page->ID); ?></p> 
 
\t \t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </li> 
 
<?php 
 
\t } 
 
?> 
 
</ul> 
 
--> 
 

 
<!-- This is what I think the output should look like --> 
 
<ul id="clans"> 
 

 
\t <li class="clan" city="Pancevo"> 
 
\t \t <a class="noselect">What is this? B</a> 
 
\t \t <div class="clan_content"> 
 
\t \t \t <div class="podaci"> 
 
\t \t \t \t <p>City: Pancevo</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </li> 
 

 
\t <li class="clan" city="Chicago"> 
 
\t \t <a class="noselect">What is this? A</a> 
 
\t \t <div class="clan_content"> 
 
\t \t \t <div class="podaci"> 
 
\t \t \t \t <p>City: Chicago</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </li> 
 
\t 
 
<ul>

Answer 2

你應該能夠做到這一點與jQuery

$('checkbox').click(function() { 
    if(!$(this).is(':checked')) { 
     $('[city="New York"]').hide(); 
    } 
});