コピー/ペーストを避けるためのjQuery関数

Question

divを（2008年から現在の年まで）読み込むjQueryがあります。

$('.filtre .f2017').click(function() { 
    $('.loader').show().delay(7000).fadeOut(); 
    $('.selected .homeliVa li').hide('slow'); 
    $('.homeliDp .itemCom').hide('slow'); 
    $('.selected .homeliAlm li').hide('slow'); 
    setTimeout('$(".selected .annee2017").show()', 5000); 
    $('.selected .nothing').show('slow'); 
    $('.loader').show().delay(7000).fadeOut(); 
    $('.filtre .date').removeClass('selectedF'); 
    $('.filtre .f2017').addClass('selectedF'); 
    $('.selected .itemCom').removeClass('selectedItem'); 
    $('.selected .annee2017').addClass('selectedItem'); 
}); 

[...] 

$('.filtre .f2008').click(function() { 
    $('.loader').show().delay(7000).fadeOut(); 
    $('.selected .homeliVa li').hide('slow'); 
    $('.homeliDp .itemCom').hide('slow'); 
    $('.selected .homeliAlm li').hide('slow'); 
    setTimeout('$(".selected .annee2008").show()', 5000); 
    $('.selected .nothing').hide('slow'); 
    $('.filtre .date').removeClass('selectedF'); 
    $('.filtre .f2008').addClass('selectedF'); 
    $('.selected .itemCom').removeClass('selectedItem'); 
    $('.selected .annee2008').addClass('selectedItem'); 
}); 

は、だから私は/コピー、毎年のための私の最初の.click機能を貼り付けます。

は、ここに私のコードです。

EDITここ

が生成されるHTML：のみ宇根項目のDOMから

$args = array(
    'posts_per_page' => '-1', 
    'orderby' => 'post_date', 
    'post_type'=> 'dp', 
    'order' => 'DESC', 
    'post_status' => 'publish' 
); 
while($the_query->have_posts()) { 
    [...] 
    <a href="<?php echo esc_url($post->guid); ?>" title="<?php echo esc_attr(get_the_title()); ?>"><?php echo get_the_post_thumbnail(); ?></a> 
    <h3> 
     <a href="<?php echo esc_url($post->guid); ?>" title="<?php echo esc_attr(get_the_title()); ?>"> 
      <?php echo esc_html(get_the_title()); ?> 
     </a> 
    </h3> 
    [...] 

そしてHTML出力：

<div id="post-16351" class="itemCom annee2014 selectedItem" style="display: block;"> 
    <div class="postHeader"> 
     <h3> 
      <a href="url" title="title"> 
       Post title 
      </a> 
     </h3> 
     <div class="postMeta"> 
      <ul class="styles"> 
       <li class="term_id"> 
        <a href="url" rel="tag">Term name</a> 
       </li> 
      </ul> 
      <span>Publié le : 17 décembre 2014</span> 
     </div> 
    </div> 
    <div class="fichiersDp"> 
     <a class="download-link filetype-icon fichier-pdf" target="blank_" href="url">name_of_file_attachment</a> 
    </div>    
</div> 

は、ループまたは何か他のものを持っていることは可能ですコピー/貼り付けを避けてcurrent yearを返します。 問題は毎年、私は新年のためにコピー/貼り付けをするべきです。

Answer 1

あなたが試すことができます：

$('.filtre .yourClass').click(function() { 
    var item = $(this).find('.class').text(); //If the text "button" is `2017` for example, this will return `2017` 
    $('.loader').show().delay(7000).fadeOut(); 
    $('.selected .homeliVa li').hide('slow'); 
    $('.homeliDp .itemCom').hide('slow'); 
    $('.selected .homeliAlm li').hide('slow'); 
    setTimeout($(".selected .annee" + item).show(), 5000); 
    $('.selected .nothing').hide('slow'); 
    $('.filtre .date').removeClass('selectedF'); 
    $('.filtre .f' + item).addClass('selectedF'); 
    $('.selected .itemCom').removeClass('selectedItem'); 
    $('.selected .annee' + item).addClass('selectedItem'); 
}); 

var item = $(this).find('element or .div').text();

は日付を回復することができます。

Answer 2

var years = [2017, 2008] //put all needed years in array 
 

 
for (var i = 0; i < years.length; i++) { 
 
    $('.filtre .f' + years[i]).click(function() { 
 
     $('.loader').show().delay(7000).fadeOut(); 
 
     $('.selected .homeliVa li').hide('slow'); 
 
     $('.homeliDp .itemCom').hide('slow'); 
 
     $('.selected .homeliAlm li').hide('slow'); 
 
     setTimeout('$(".selected .annee" + years[i]).show()', 5000); 
 
     $('.selected .nothing').hide('slow'); 
 
     $('.filtre .date').removeClass('selectedF'); 
 
     $('.filtre .f' + years[i]).addClass('selectedF'); 
 
     $('.selected .itemCom').removeClass('selectedItem'); 
 
     $('.selected .annee' + years[i]).addClass('selectedItem'); 
 
    }); 
 
}

Answer 3

ただ、ある年から開始し、特定の年に終了したループを作ります。あなたは配列と同じことを行うことができ

for (var year = 2000; year < 2008; year++) { 

    $('.filtre .f' + year).click(function() { 
     $('.loader').show().delay(7000).fadeOut(); 
     $('.selected .homeliVa li').hide('slow'); 
     $('.homeliDp .itemCom').hide('slow'); 
     $('.selected .homeliAlm li').hide('slow'); 
     setTimeout('$(".selected .annee' + year + '").show()', 5000); 
     $('.selected .nothing').show('slow'); 
     $('.loader').show().delay(7000).fadeOut(); 
     $('.filtre .date').removeClass('selectedF'); 
     $('.filtre .f' + year).addClass('selectedF'); 
     $('.selected .itemCom').removeClass('selectedItem'); 
     $('.selected .annee' + year).addClass('selectedItem'); 
    }); 
} 

：だからのようなテンプレートに今年挿入

var years = [2000, 2008, 2010] 
years.forEach(function(year) { 
    // same template as above in here 
}) 

Answer 4

可能であれば、あなたが含む各関連要素にデータ属性または類似を追加することができますユニークな年の識別子（例：data-filtre-year="2008"） - そのデータ属性をセレクタとして使用すると、イベントをバインドできます。あなたがidまたはclassでクリックするdiv要素を持っている場合は

$('.filtre [data-filtre-year]').click(function() { 
    var $currentElement = $(this); 
    var anneeClass = '.annee' + $currentElement.data('filtreYear'); 

    $('.loader').show().delay(7000).fadeOut(); 
    $('.selected .homeliVa li').hide('slow'); 
    $('.homeliDp .itemCom').hide('slow'); 
    $('.selected .homeliAlm li').hide('slow'); 
    setTimeout('$(".selected ' + anneeClass + '").show()', 5000); 
    $('.selected .nothing').hide('slow'); 
    $('.filtre .date').removeClass('selectedF'); 

    $currentElement.addClass('selectedF'); // as you are already in the context of the element you can use "this" 

    $('.selected .itemCom').removeClass('selectedItem'); 
    $('.selected ' + anneeClass).addClass('selectedItem'); 
});