Jquery 根据所选的变量选择限制属性

我正在处理一个场景，在这个场景中，我有一个可变的产品，并且我正试图根据用户的选择禁用该可变产品的选择选项。您会注意到，我在中有多个高度和宽度值。我想实现的是，当用户选择特定高度时，只显示可用的宽度。高度也是如此，如果高度是一定量，我需要限制可用的宽度

最初，我认为如果产品是单个产品，并且产品类别与我针对此特定功能的目标项匹配，我可以将一段JavaScript排队运行

然后，我使用基本jQuery来监听高度和宽度表单项的变化事件

$( "#width" ).change(event, function(event) {
  console.log(event);
  console.log(this);
  console.log($(this));
  
  currentWidth = parseInt($(this).val().replace('"',''));
  console.log(currentWidth);

  isWidthSet = true;

  if(currentWidth == 80){
    //width is 80, must restrict max height.
    if(isHeightSet == false){
        $("#height").children().each(function(){
            if(parseInt($(this).val().replace('"','')) > 47){
                console.log(this);
                console.log($(this));
                $(this).removeClass('enabled');
                $(this).removeClass('attached');
                $(this).remove();
                $(this).attr('disabled','disabled');
            }
        });
    }else{
        //set alert somewhere. 
    }

  }
  
  
});

如果选择了不同的表单选项，则会触发此操作。问题在于，每次在变体表单中更改属性值时，都会有其他功能重新生成变体选项

虽然我知道这是变体设计的一部分，但我正在寻找一种解决方案，允许我根据用户的选择禁用这些选项。由于我们使用的是测量值，因此根据可用测量值的数量创建变化并限制高度和宽度将非常麻烦。这就是为什么我看到了一个程序化的解决方案

我还尝试为变体表单连接WooCommerce的JavaScript事件，认为这可能是在我第一次使用上述方法并重置表单后触发的

$( ".variations_form" ).on( "woocommerce_variation_select_change", function () {
// Fires whenever variation selects are changed
});

这种修改可用变体属性的方法也会失败，因为在类似的Javascript将属性设置为禁用后，这些属性会被修改

为了以编程方式隐藏变量属性变量，我是否应该查看其他JS钩子或设置

---

任何建议都将不胜感激。

我仔细阅读了

知道WooCommerce正在与CMS中特定产品的属性和变化数据集进行交互，

onfinvariation

让我找到了一个某种程度上可以接受的解决方案，实现了我想要做的事情

看到WooCommerce查看用户选择，根据变体的配置方式查找适当的属性值，并在用户更改变体选择时显示这些值，就好像这是在重置表单一样

$( ".variations_form" ).on( "woocommerce_variation_select_change", function () {
// Fires whenever variation selects are changed
});

相反，我将事件挂钩更改为使用

reset\u data

而不是

woocommerce\u variation\u select\u change

新代码如下：

var currentWidth = 0;
var currentHeight = 0;
var isWidthSet = false;
var isHeightSet = false;

$( ".variations_form" ).on( "reset_data", function () {
// Fires whenever variation selects are changed
    console.log("THIS IS WORKING JS HOOK.");

          console.log(event);
          console.log(this);
          console.log($(this));
          
          currentWidth = parseInt($('#width').val().replace('"',''));
          console.log(currentWidth);

          isWidthSet = true;

          if(currentWidth == 80){
            //width is 80, must restrict max height.
            if(isHeightSet == false){
                $("#height").children().each(function(){
                    if(parseInt($(this).val().replace('"','')) > 47){
                        console.log(this);
                        console.log($(this));
                        //$(this).removeClass('enabled');
                        //$(this).removeClass('attached');
                        //$(this).remove();
                        //$(this).attr('disabled','disabled');
                        $(this).css('display','none');
                    }
                });
            }else{
                //set alert somewhere. 
            }

          }
          
          
        

} );

您会注意到，我只是关闭了它们的可见性，以便用户无法选择我要消除的值

这只是一个概念证明，目前还没有经过全面测试，但我愿意留下这个问题，以便其他人可以提供任何更好的方法来实现所需的功能

谢谢，永远感谢你的洞察力