jQuery函數，以避免複製/粘貼

Question

我有一個jQuery加載div年份（從2008年到今年）的內容。

這裏是我的代碼：

$('.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功能每年。

編輯

這裏產生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輸出僅UNE項目：

<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

如果你有div來點擊與id或class你可以嘗試：

$('.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" - 然後使用該數據屬性作爲選擇器，您可以綁定該事件。

$('.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'); 
});