jQuery函数避免复制/粘贴

我有一个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：

$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>
   [...]

DOM的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 。 问题是，每年我都应该复制/粘贴新的一年。

---

如果你有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(); 允许您恢复日期。

---

只需制作一个循环，在某一年开始并在某一年完成。 并将年份插入到模板中，如下所示：

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
})

---

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

链接地址: http://www.djcxy.com/p/83461.html

上一篇: jQuery function to avoid copy/paste

下一篇: Best practice syntactically for multiple jQuery selectors