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

Question

在Shopify中，我试图在脚本文件中获取所选变体的ID。 我可以通过获取URL参数来获取变体ID，但是它为我提供了on change事件之前的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并找出客户选择的变体所具有的元素，并从中进行挖掘以发现“变化”和后续价值。