javascript - 如何在 jQuery 更改事件后获取更新的 URL 参数

Question

在 Shopify 中，我试图在脚本文件中获取所选变体的 ID。我能够通过获取 URL 参数来获取变体 ID，但它为我提供了在发生更改事件之前存在的 url 参数。

我尝试进行 AJAX 调用，遍历产品变体 ID，但没有成功。

// Getting the URL Parameter for Variant ID 
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
};


$('#option-color').change(function() {

  var currentUrl = getUrlParameter('variant');

  var variants = [];
  var selected = $(this).val(),
      mainImage = jQuery('.main-image img').attr('srcset'),
      maxCount = 0;

  $('.thumbnail').addClass('thumbnail--hidden');
  $('.thumbnail--last').addClass('thumbnail--last');
  arr = [];


  var addImage = $.each(images, function(i, image) {
    var alt = images[i].alt,
        url = images[i].url;

    if (( alt == selected || url == mainImage) && maxCount < 4) {
      $($('.thumbnail img[alt="' + alt + '"]')[maxCount]).parents('.thumbnail').removeClass('thumbnail--hidden');

      maxCount++
    }

  });

我基本上希望能够输出选择新颜色后变体 ID。

Answer 1

当希望获取当前所选变体的变体 ID 时，您应该在更改变体的实际元素上设置一个监听器。所有这些事件元素都会发出一种您可以收听的“更改”事件。当您收到更改事件时，通常您会收到一个要检查的变体，但如果没有，您始终可以查询该元素的当前值。

查看 URL 可能是执行此操作效率最低且最不可靠的方法。并非所有主题都愿意将当前变体放在 URL 中，正如您所指出的那样，根据您选择检查和解析该值的时间，它可能不代表您想要的内容。

因此，最安全的方法是检查 DOM 并找出客户选择变体时使用的元素，然后深入挖掘以发现“变化”和后续值(value)。