在for循环中更改jquery函数?

r1wp621o  于 2023-01-04  发布在  jQuery
关注(0)|答案(2)|浏览(133)

这个功能可以缩短吗?
'

$(function () {
let section1 = $('.amount_1').attr('data-product_id');
 let section2 = $('.amount_2').attr('data-product_id');
 let section5 = $('.amount_5').attr('data-product_id');
 let section10= $('.amount_10').attr('data-product_id');
 let section15 = $('.amount_15').attr('data-product_id');
 let $link1 = $("#" + section1).find('a').clone().text('');
 if ($link1.length > 0) {
   $('.col1').removeAttr("href").removeClass("single").wrap($link1).addClass("active");
}
let $link2 = $("#" + section2).find('a').clone().text('');
 if ($link2.length > 0) {
   $('.col2').removeAttr("href").removeClass("single").wrap($link2).addClass("active");
}
let $link5 = $("#" + section5).find('a').clone().text('');
 if ($link5.length > 0) {
   $('.col5').removeAttr("href").removeClass("single").wrap($link5).addClass("active");
}
let $link10 = $("#" + section10).find('a').clone().text('');
 if ($link10.length > 0) {
   $('.col10').removeAttr("href").removeClass("single").wrap($link10).addClass("active");
}
let $link15 = $("#" + section15).find('a').clone().text('');
 if ($link15.length > 0) {
   $('.col15').removeAttr("href").removeClass("single").wrap($link15).addClass("active");
}
});

'
也许在一个for循环中?我真的不知道为什么,因为数字是随机的。提前感谢

guicsvcw

guicsvcw1#

如果您有权更改HTML,我个人建议您使用一个可以一次性收集的类来更改它......并将amount移动到它自己的data属性
例如,HTML中的class="amount_1"将变为class="amount" data-amount="1"

$(function () {
  $(".amount").each(function() {
    let $amount = $(this);
    let amountVal = $amount.data("amount");
    let productId = $amount.data("product_id");
    
    let $link = $(`#${productId}`).find('a').clone().text('');
    if ($link.length > 0) {
      $(`.col${amountVal}`).removeAttr("href").removeClass("single").wrap($link).addClass("active");
    }
  });
});

另请注意,jQuery提供了.data() method,因此您不需要使用attr

vaqhlq81

vaqhlq812#

对我来说,它看起来并不那么“随机”,数字1, 2, 5, 10, 15是相当重复的。提取它们并将它们用作jquery选择器的一部分。
如下所示(upd,仅1个循环的版本):

$(function () {
  ["1", "2", "5", "10", "15"].forEach((x) => {
    const section = $(`.amount_${x}`).attr("data-product_id");
    const $link = $(`#${section}`).find("a").clone().text("");
    if (!$link || $link.length <= 0) return;
    $(`.col${x}`)
      .removeAttr("href")
      .removeClass("single")
      .wrap($link)
      .addClass("active");
  });
});

相关问题