请求将Vanilla JS商品切换功能代码转换为jQuery语法

问题说明 #

我对jQuery了解有限，赶时间，觉得原生JS更容易上手开发。目前已实现商品列表功能：页面有两个按钮触发buttonPress()函数，切换展示products数组中的精选商品。原生JS代码可正常运行，但自行转换jQuery语法失败，求帮忙转换。

转换后的jQuery代码 #

var products = 
    [
        {
            "id": 1,
            "url": "https://swiftwintekstore.com/products/type-c-usb-3-2-gen2-pcie-card-hub-usb-3-0-pci-express-board-pci-e-pci-e-usb-3-adapter-multiplier-usb3-3-1-controller-riser-cards",
            "rel": "Product page of a Type C USB 3.2 Gen2 PCIE Card Hub USB",
            "title": "Type C USB 3.2 Gen2 PCIE Card Hub",
            "desc": "Type C USB 3.2 Gen2 PCIE Card Hub USB 3.0 Adapter Multiplier USB3 3.1 Controller Riser Cards",
            "discount_amt": 18.2
        },
        { 
            "id": 2,
            "url": "https://swiftwintekstore.com/products/super-si-pro-silicon-fast-charger-mobile-phone-30w",
            "rel": "Product page of a Super Si Pro Silicon Fast Charger Mobile Phone 30W",
            "title": "Super Si Pro Silicon Fast Charger Mobile 30W",
            "desc": "Super Si Pro Silicon Fast Charger Mobile Phone 30W",
            "discount_amt": 7.14
        },
        { 
            "id": 3,
            "url": "https://swiftwintekstore.com/products/zoerax-rj45-pass-through-crimper-for-cat6a-cat6-cat5-cat5e-ethernet-connector-all-in-one-crimp-tool",
            "rel": "Product page of the ZoeRax RJ45 Pass Through Crimper for Cat6a Cat6 Cat5 Cat5e Ethernet Connector",
            "title": "ZoeRax RJ45 Pass Through Crimper for Cat6a Cat6 Cat5 Cat5e Ethernet Connector",
            "desc": "ZoeRax RJ45 Pass Through Crimper for Cat6a Cat6 Cat5 Cat5e Ethernet Connector",
            "discount_amt": 25.0
        },
        { 
            "id": 4,
            "url": "https://swiftwintekstore.com/products/zoerax-network-cable-tester-rj45-rj11-cat5-tool-test-ethernet-telephone-cables?variant=47704487297362",
            "rel": "Product page of the ZoeRax Network Cable Tester RJ45 RJ11 CAT5 Tool",
            "title": "ZoeRax Network Cable Tester RJ45 RJ11 CAT5 Tool",
            "desc": "Ensure your CAT cables are working correctly. Get the ZoeRax Network Cable Tester RJ45 RJ11 CAT5 Tool with this <strong>Huge</strong> discount!",
            "discount_amt": 41.6
        },
        {
            "id": 5,
            "url": "https://swiftwintekstore.com/products/zoerax-all-in-one-pass-through-crimper-for-rj45-rj12-rj11-network-connectors-cat5-5e-6-6a-7?_pos=3&_sid=0cc4887e8&_ss=r",
            "rel": "Product page of the ZoeRax All-in-One Pass Through Crimper for RJ45 RJ12 RJ11 Network Connectors - CAT5/5e/6/6a/7",
            "title": "ZoeRax All-in-One Pass Through Crimper for RJ45 RJ12 RJ11 Network Connectors - CAT5/5e/6/6a/7",
            "desc": "ZoeRax All-in-One Pass Through Crimper for RJ45 RJ12 RJ11 Network Connectors - CAT5/5e/6/6a/7",
            "discount_amt": 19.3
        },
        {
            "id": 6,
            "url": "https://swiftwintekstore.com/products/mini-magnetic-power-bank-10000mah-external-battery",
            "rel": "Product-page-of-a-magnetic-power-bank",
            "title": "mini-magnetic-power-bank-10000mah-external-battery",
            "desc": "New Power Banks in stock, 10000mAh 15WPD",
            "discount_amt": 7.13
        },
        {
            "id": 7,
            "url": "https://swiftwintekstore.com/products/electric-household-small-coffee-automatic-cream-stirrer",
            "rel": "Product-page-of-an-automatic-coffee-cream-stirrer",
            "title": "coffee-automatic-cream-stirrer",
            "desc": "Coffee drinker? Don't miss out on this product",
            "discount_amt": 11.7
        },
        {
            "id": 8,
            "url": "https://swiftwintekstore.com/products/compact-bluetooth-photo-tag-sticker-thermal-printer-for-on-the-go-printing",
            "rel": "Product page of a mobile bluetooth photo printer",
            "title": "compact bluetooth photo sticker printer",
            "desc": "Compact Bluetooth Photo Tag Sticker Thermal Printer for On-the-Go Printing",
            "discount_amt": 15
        },
        {
            "id": 9,
            "url": "https://swiftwintekstore.com/products/zoerax-nvme-pro-adapter-pcie-4-0-ssd-to-desktop-pc-64gbps-m-2-nvme-ssd?variant=47704764809554",
            "rel": "Product page for the ZoeRax NVME Pro Adapter - PCIe 4.0 SSD to Desktop PC - 64Gbps - M.2 NVMe SSD",
            "title": "ZoeRax NVME Pro Adapter - PCIe 4.0 SSD to Desktop PC - 64Gbps - M.2 NVMe SSD",
            "desc": "ZoeRax NVME Pro Adapter - PCIe 4.0 SSD to Desktop PC - 64Gbps - M.2 NVMe SSD",
            "discount_amt": 30
        },
        {
            "id": 10,
            "url": "https://swiftwintekstore.com/products/2-5gbps-pci-e-network-card-stable-wired-connection-for-high-speed-performance-compatible-with-gigabit-ethernet-networks-ce-certified",
            "rel": "Product page of a 2.5Gbps PCI-E Network Card",
            "title": "2.5gbps PCIe network card - CE certified",
            "desc": "2.5Gbps PCI-E Network Card - Stable Wired Connection for High-Speed Performance - Compatible with Gigabit Ethernet Networks - CE Certified",
            "discount_amt": 0
        }
    ];

let add_new_items = true;

// 点击左右按钮时，替换ul内容为数组中对应商品的li元素
const buttonPress = () => {
  if (add_new_items) {
    add_products(0, products.length / 2);
    add_new_items = false;
  } else {
    add_products(5, products.length);
    add_new_items = true;
  }
};

const add_products = (start_index, end_index) => {
  const $productsContainer = $("#featured-prod-container");
  $productsContainer.empty(); // 清空容器内容
  
  for (let index = start_index; index < end_index; index++) {
    const product = products[index];
    // 用jQuery创建li元素
    const $li = $(`
      <li class="product-all" id="${product.id}">
        <a class="in-stock-links" href="${product.url}"
            rel="${product.rel}" title="${product.title}">
            <p class="product-desc">
                ${product.desc}
            </p>
            <p class="discount-amount">
                <span class="now">Now ${product.discount_amt}% Off </span>
            </p>
        </a>
      </li>
    `);
    $productsContainer.append($li); // 添加到容器
  }
};

关键转换说明 #

• 元素选择：用$("#featured-prod-container")替代原生的document.getElementById
• 清空内容：用jQuery的.empty()方法替代innerHTML = ""，更安全且符合jQuery规范
• 元素创建与添加：用$()直接构造HTML字符串生成jQuery元素，再用.append()添加到容器，替代原生的createElement和appendChild
• 核心逻辑保持不变，仅替换DOM操作相关代码

内容的提问来源于stack exchange，提问作者Daniel B