https://videohunter.tw/static/videohunter-tw/assets/home/js/common/store.js

1const initDropdown = (options) => {
2  const { downClass, triggerClass, dropdownClass, valueClass } = options;
3
4  $(`.${downClass}`).each(function () {
5    const $dropdown = $(this);
6    const $value = $dropdown.find(`.${valueClass}`);
7    const $trigger = $dropdown.find(`.${triggerClass}`);
8    const $list = $dropdown.find(`.${dropdownClass} li`);
9
10    $list.off("click").on("click", function (event) {
11      event.preventDefault();
12      event.stopPropagation();
13      const index = $(this).index();
14      $value.text($(this).text());
15      $dropdown.removeClass("active");
16      $showBottom = $(this).closest(".product-item").find(".show");
17      //   $(this)
18      //     .closest(".product-item")
19      //     .find(".min-text")
20      //     .toggle(index === 0);
21      $dropdown.removeClass("active");
22      $(this).closest(".product-item").find(".bottom").hide();
23
24      $(this)
25          .closest(".product-item")
26          .find(`.bottom:eq(${index})`)
27          .show();
28    });
29
30    $trigger.off("click").on("click", function (event) {
31      event.stopPropagation();
32      event.preventDefault();
33      $dropdown.toggleClass("active");
34    });
35  });
36
37  $(document)
38      .off("click")
39      .on("click", function () {
40        $(`.${downClass}`).removeClass("active");
41      });
42};
43
44initDropdown({
45  downClass: "product-down",
46  triggerClass: "product-down_box",
47  dropdownClass: "product-down_ul",
48  valueClass: "product-down_text",
49  arrowClass: "icon-down",
50  valueKey: "val",
51});
52$(".wrap2-top_item").on("click", function () {
53  if (!$(this).hasClass("active")) {
54    $(this).addClass("active");
55  }
56  $(this).siblings().removeClass("active");
57  if ($(this).hasClass("all")) {
58    $(".audio-box,.video-box").show();
59  } else {
60    if ($(this).hasClass("video")) {
61      $(".audio-box").hide();
62      $(".video-box").show();
63    } else {
64      $(".audio-box").show();
65      $(".video-box").hide();
66    }
67  }
68});
69function checkOS() {
70  if (!/iPhone|iPad|iPod|Mac/i.test(navigator.userAgent)) {
71    return "win";
72  } else {
73    return "mac";
74  }
75}
76if (checkOS() === "win") {
77  $(".win-link,.buy-btn-win,.buy-now-btn.buy-btn-win").show();
78  $(".mac-link,.buy-btn-mac,.buy-now-btn.buy-btn-mac").hide();
79} else {
80  $(".mac-link,.buy-btn-mac,.buy-now-btn.buy-btn-mac").show();
81  $(".win-link,.buy-btn-win,.buy-now-btn.buy-btn-win").hide();
82}
83$(".win-link,.mac-link").on("click", function () {
84  var $container = $(this).closest(".product-item, .wrap3-item_right");
85
86  if ($(this).hasClass("win-link")) {
87    $container.find(".win-link").hide();
88    $container.find(".mac-link").show();
89    $container.find(".buy-btn-mac, .buy-now-btn.buy-btn-mac").show();
90    $container.find(".buy-btn-win, .buy-now-btn.buy-btn-win").hide();
91  } else {
92    $container.find(".mac-link").hide();
93    $container.find(".win-link").show();
94    $container.find(".buy-btn-win, .buy-now-btn.buy-btn-win").show();
95    $container.find(".buy-btn-mac, .buy-now-btn.buy-btn-mac").hide();
96  }
97});
98$(".price-radio-list li").on("click", function () {
99  // Remove active class from other items in the same list
100  $(this).siblings().find(".radio").removeClass("active");
101  // Add active class to the current item's radio
102  $(this).find(".radio").addClass("active");
103  // Get the index of the current li
104  const index = $(this).index();
105  // Remove show class from all btn-box elements
106  $(this).closest(".wrap3-item_right").find(".btn-box").removeClass("show");
107  // Show the btn-box with the corresponding index
108  $(this)
109      .closest(".wrap3-item_right")
110      .find(`.btn-box:eq(${index})`)
111      .addClass("show");
112});
113
114// Initialize Wrap2 swiper (mobile)
115let wrap2SwiperInstance;
116function handleWrap2Swiper() {
117  if ($(window).width() < 770) {
118    if (!wrap2SwiperInstance && $(".wrap2-swiper").length > 0) {
119      wrap2SwiperInstance = new Swiper(".wrap2-swiper", {
120        slidesPerView: 1,
121        spaceBetween: 24,
122        grid: {
123          rows: 4,
124          fill: "column",
125        },
126        pagination: {
127          el: ".wrap2-swiper .swiper-pagination",
128          clickable: true,
129        },
130      });
131    }
132  } else {
133    if (wrap2SwiperInstance) {
134      wrap2SwiperInstance.destroy();
135      wrap2SwiperInstance = null;
136    }
137  }
138}
139
140// Initialize Choose swiper (mobile)
141let chooseSwiperInstance;
142function handleChooseSwiper() {
143  if ($(window).width() < 770) {
144    if (!chooseSwiperInstance && $(".choose-swiper").length > 0) {
145      chooseSwiperInstance = new Swiper(".choose-swiper", {
146        autoHeight: true,
147        pagination: {
148          el: ".swiper-pagination",
149          clickable: true,
150        },
151      });
152    }
153  } else {
154    if (chooseSwiperInstance) {
155      chooseSwiperInstance.destroy();
156      chooseSwiperInstance = null;
157    }
158  }
159}
160
161// Wrap3 tab switching functionality
162$(document).ready(function () {
163  // Initialize: Ensure Pro panel is displayed by default (if active class is not set in HTML)
164  if (
165      $(".wrap3-panel-pro").length > 0 &&
166      !$(".wrap3-panel-pro").hasClass("active")
167  ) {
168    $(".wrap3-panel-pro").addClass("active");
169    $(".wrap3-tab-item[data-tab='pro']").addClass("active");
170  }
171
172  // Tab click switching
173  $(".wrap3-tab-item").on("click", function () {
174    const $tab = $(this);
175    const tabType = $tab.data("tab");
176
177    // Remove active class from all tabs
178    $(".wrap3-tab-item").removeClass("active");
179    // Add active class to the clicked tab
180    $tab.addClass("active");
181
182    // Remove active class from all panels
183    $(".wrap3-panel").removeClass("active");
184    // Add active class to the corresponding panel
185    $(`.wrap3-panel-${tabType}`).addClass("active");
186  });
187
188  // Initialize wrap2-swiper and choose-swiper
189  handleWrap2Swiper();
190  handleChooseSwiper();
191});
192
193// Reinitialize swiper when window size changes
194$(window).on("resize", function () {
195  handleWrap2Swiper();
196  handleChooseSwiper();
197});

198[...document.querySelectorAll("*")].forEach((el) => {
199  const rect = el.getBoundingClientRect();
200  if (rect.width > window.innerWidth) {
201    console.log("超出元素：", el, "宽度：", rect.width);
202    el.style.outline = "2px solid red";
203  }
204});
205
206$('.store .product-item:not(.item-new)').find('.bottom:eq(0)').hide();
207$('.store .product-item').find('.bottom:eq(1)').show();
208$('.store .wrap3 .wrap3-item').find('.btn-box:eq(1)').addClass('show');
209$('.store .wrap3 .wrap3-item').find('.btn-box:eq(2)').removeClass('show');
210$('.store .wrap3 .wrap3-item').find('.price-radio-list li .radio').removeClass('active');
211$('.store .wrap3 .wrap3-item').find('.price-radio-list li:eq(1) .radio').addClass('active');