jQuery函数，以避免复制/粘贴

我有一个jQuery加载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功能每年。

编辑

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

来源

2017-09-06 Reitrac

请包含所有相关代码，特别是HTML代码 –

HTML是由函数生成的。此函数返回特定年份和特定帖子类型的每个帖子。我的代码工作，我只是想避免复制/粘贴:) – Reitrac

我们不能有效地帮助你没有看到HTML。如果它是自动生成的，只需从输出复制/粘贴 –

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

来源

2017-09-06 10:50:56 Monagraphic

我用'a'代替'.date'和'.class'的'.yourClass'，它完美的工作。非常感谢！ – Reitrac

很高兴帮助你:) – Monagraphic

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

来源

2017-09-06 09:46:40

工程，但始终显示2008年，当我点击另一个日期 – Reitrac

只是做一个循环，开始在某年在某一年完成。然后将一年分为模板，像这样：

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

来源

2017-09-06 09:50:37

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

来源

2017-09-06 09:57:28 Nope

jQuery函数，以避免复制/粘贴

回答

相关问题