Javascript 避免复制/粘贴的jQuery函数

我有一个jQuery来按年份（从2008年到今年）加载

div

内容

这是我的密码：

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

因此，我复制/粘贴了我的第一个

。每年单击
功能

编辑

以下是生成的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>
   [...]

$args=array(
'每页发布'=>'-1'，
'orderby'=>'post_date'，
“post_type”=>“dp”，
“订单”=>“描述”，
“发布状态”=>“发布”
);
while（$the\u query->have\u posts（））{
[...]
[...]

仅针对une项的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>






出版日期：2014年12月17日

是否可以使用循环或其他方法来避免复制/粘贴并返回本年度
。
问题是每年我都要为新年复制/粘贴。

var years=[2017，2008]//将所有需要的年份放入数组中
对于（变量i=0；i

var years=[2017，2008]//将所有需要的年份放入数组中
对于（变量i=0；i}
只需创建一个从某一年开始到某一年结束的循环。然后将该年插入模板，如下所示：

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

只需做一个从某一年开始到某一年结束的循环。然后将该年插入模板，如下所示：

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

如果可能，您可以为包含唯一年份标识符的每个相关元素添加数据属性或类似元素，例如：
data filter 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');
});

如果可能，您可以为包含唯一年份标识符的每个相关元素添加数据属性或类似元素，例如：
data filter 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');
});

如果要使用
id
或
class
单击div，您可以尝试：

$('.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（）；
允许您恢复日期。
如果您要使用
id
或
class
单击div，您可以尝试：

$('.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（）；
允许您恢复日期。
请包括所有相关代码，特别是HTML代码HTML是由函数生成的。此函数返回特定年份和特定帖子类型的每篇帖子。我的代码有效，我只想避免复制/粘贴：）如果没有看到HTML，我们无法有效地帮助您。只要从输出中复制/粘贴它即可的自动生成为什么不创建一个年数组并遍历该数组以获得所有年？可能的重复请包括所有相关代码，特别是HTML代码HTML是由函数生成的。此函数返回特定年份和特定帖子类型的每篇帖子。我的代码有效，我只是想避免复制/粘贴：）我们无能为力如果是自动生成的，只需从输出中复制/粘贴它。为什么不创建一个数组多年，并在数组中迭代以获得所有年份？Works可能重复，但当我单击另一个dateWorks时始终显示2008，但当我单击另一个dateI替换
时始终显示2008。yourClass
由普通类
替换。date
和
由
a
替换。class
由
a
替换。非常感谢！很高兴帮助你：）我将
替换为
。yourClass
由普通类
替换。date
和
由
a
替换。class
由
替换，效果很好。非常感谢！很高兴帮助你：）