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並找出客戶選擇的變體所具有的元素，並從中進行挖掘以發現“變化”和后續價值。