如何看待这个jQuery函数

问题描述 投票:0回答:1

这是进度条[jquery-asProgress.js]的功能的一部分,试图弄清楚如何通过简化的结构或者是否有可能使该查询找到值<100和> 69来压缩此jquery函数(不是确定是否有可能)。

<script type="text/javascript">
jQuery(function($) {
    $('.progress[data-goal="99"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="98"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="97"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="96"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="95"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="94"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="93"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="92"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="91"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="90"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="89"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="88"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="87"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="86"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="85"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="84"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="83"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="82"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="81"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="80"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="79"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="78"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="77"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="76"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="75"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="74"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="73"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="72"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="71"]').find('.progress__bar').addClass('wishlist_cash_add');
    $('.progress[data-goal="70"]').find('.progress__bar').addClass('wishlist_cash_add');
});   

感谢您的时间

jquery progress-bar
1个回答
0
投票

您可以通过迭代从70到99的数字来创建选择器字符串:

let selector = '.progress[data-goal="70"]';
for (let i = 71; i <= 99; i++) {
  selector += `, .progress[data-goal="${i}"]`;
}
$(selector).find('.progress__bar').addClass('wishlist_cash_add');

如果此处选择的元素是only元素,且其data-goal以7、8或9开头,则还可以使用^=(“属性以”开头“)语法:

$('.progress[data-goal^="7"], .progress[data-goal^="8"], .progress[data-goal^="9"]').find('.progress__bar').addClass('wishlist_cash_add');

((如果您在某个位置有类似data-goal="3"的元素,则可以考虑将它们更改为data-goal="03",因此它们的前导零)]

© www.soinside.com 2019 - 2024. All rights reserved.