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

【问题标题】：How to get updated URL parameters after a jQuery change event如何在 jQuery 更改事件后获取更新的 URL 参数
【发布时间】：2019-06-13 07:23:24
【问题描述】：

在 Shopify 中，我试图在脚本文件中获取所选变体的 ID。我能够通过获取 URL 参数来获取 Variant 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。

【问题讨论】：

标签： javascript jquery shopify

【解决方案1】：

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

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

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

【讨论】：