用于条件加载变体字段的 Jquery Click 功能无法正常工作答案

【问题标题】：Jquery Click function for conditional loading of Variation Fields not working properly用于条件加载变体字段的 Jquery Click 功能无法正常工作
【发布时间】：2021-02-16 12:59:50
【问题描述】：

我正在根据从收音机组中选择的一项来隐藏和显示字段。父元素是“ul”，角色radiogroup 带有“li”形式的选项（按钮）。我的目标是在用户仅点击特定按钮时显示新字段。

我唯一可以定位的元素是属性“aria-checked”，它可以是真或假。它正在工作，但问题是它在第二次点击时工作。似乎代码选择了点击之前的属性值，而不是点击之后的值。

这是我的代码：

jQuery( document ).ready(function( $ ) {
    
     $("li").click(function() { 
    if ( $("[data-title='variation1']").attr('aria-checked') == 'false' ) {
    $("[data-attribute_name='attribute_pa_subvariations']").css("display", "none");

    }   else if ( $("[data-title='variation1']").attr('aria-checked') == 'true' ) {
    $("[data-attribute_name='attribute_pa_subvariations']").css("display", "flex");
} 

    
  });

我知道我错过了一些可以完成的事情，但不幸的是，我没有做对。任何帮助将不胜感激。

谢谢！

【问题讨论】：

向我们展示 HTML 并通过在编辑器中按按钮使用 sn-p 制作 minimal reproducible example，这样我们就可以自己看到它...
嗨！谢谢你告诉我这件事。实际上，它不像普通的 HTML 单选按钮那样工作，这就是为什么在不包含外部 JS 的情况下无法在此处重现功能按钮的原因。它更接近这个 (w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/examples/…)，唯一的区别是使用
- 而不是
  。现在它在用 100 ms 将它包装在“setTimeout”函数中后对我来说工作正常。再次感谢你！ :)

标签： javascript jquery

【解决方案1】：

我将上面的代码封装在 setTimeout 函数中，以便在单击按钮 100 毫秒后获取属性的值。现在它在单击后检查更新的值。这是对我有用的最终代码：

jQuery( document ).ready(function( $ ) {
    
     $("li").click(function() { 
      setTimeout(function() {
    if ( $("[data-title='variation1']").attr('aria-checked') == 'false' ) {
    $("[data-attribute_name='attribute_pa_subvariations']").css("display", "none");

    }   else if ( $("[data-title='variation1']").attr('aria-checked') == 'true' ) {
    $("[data-attribute_name='attribute_pa_subvariations']").css("display", "flex");
} 

  }, 100);  
  });
});

【讨论】：