切换每个项目的aria属性

Question

我有一个show hide活动，我试图切换几个aria属性。在下面的示例代码中，我使用了一个属性来显示我想要实现的内容。切换有效，但它适用于所有.hideMe'类，而不是每个类。

我想要获得的功能是只有扩展选项卡的aria-expanded =“true”而其他选项为false。然后，当我单击另一个选项卡时，选项卡更改为true，其余选项为false。

<div id="interactive_folder_01" aria-live="polite">
            <span class="folder_02"></span>
            <div class="theWhiteBit"></div>
            <button tabindex="0" data-id="01" class="legend_icon icon_01 tab"">Question 1</button>
            <button tabindex="0" data-id="02" class="legend_icon icon_02 tab">Question 2</button>
            <button tabindex="0" data-id="03" class="legend_icon icon_03 tab">Question 3</button>
            <button tabindex="0" data-id="04" class="legend_icon icon_04 tab">Question 4</button>
            <button tabindex="0" data-id="05" class="legend_icon icon_05 tab">Question 5</button>

             <div class="cte_01 hideMe" style="display: none;" aria-expanded="false"> 
             <p><strong>Answer 1</strong></p>
                   <p>Content</p>
                        </div>

            <div class="cte_02 hideMe" style="display: block;" aria-expanded="false">
            <p><strong>Answer 2</strong></p>
             <p>Content</p>
            </div>

            <div class="cte_03 hideMe" style="display: none;" aria-expanded="false">
            <p><strong>Answer 3</strong></p>
                 <p>Content</p>
            </div>

            <div class="cte_04 hideMe" style="display: none;" aria-expanded="false">
<p><strong>Answer 4</strong></p>
            <p>content</p>
            </div>
            </div>
            <div class="cte_05 hideMe" style="display: none;" aria-expanded="false">
<p><strong>Answer 5</strong></p>
                 <p>Content</p>
            </div>
      </div>

JS。此代码隐藏所有内容：

var hideus = $('.hideMe');

$(hideus).hide();
$('.folder_info_01 , .cte_01').show();

$('.tab').on('click', function(e) {
  e.preventDefault();

  var $this = $(this),
    suffix = $this.data('id');

  $('#interactive_folder_01 span').removeClass().addClass('folder_' + suffix);

  $(hideus).hide();
  $('img.folder_info_' + suffix + ' , .cte_' + suffix).show();

  $('.hideMe').each(function() {
    $(this).attr('aria-expanded', function(i, attr) {
      return attr == 'true' ? 'false' : 'true'
    });

  });

});

Answer 1

您可以将css选择器更改为'.hideMe[aria-expanded="true"]：

//Hide the elements that have the aria-expanded attribute set to false 
var hideus = $('.hideMe[aria-expanded="false"]');
$(hideus).hide();

//Show elements that have aria-expanded attribute set to true
var showUs = $('.hideMe[aria-expanded="true"]');
$(showUs).show();

修改

您可以执行以下操作来切换aria-expanded属性：

var hideus = $('.hideMe');

$(hideus).hide();
$('.folder_info_01 , .cte_01').show();

$('.tab').on('click', function(e) {
  e.preventDefault();

  var $this = $(this);
  var suffix = $this.data('id');

  $('#interactive_folder_01 span').removeClass().addClass('folder_' + suffix);
    $(hideus).hide();
  $('img.folder_info_' + suffix + ' , .cte_' + suffix).show();
  //Set all aria-expanded=true elements to false
  $('.hideMe[aria-expanded="true"]').attr('aria-expanded', 'false');
  //Set the element that you want shown to aria-expanded=true
  $('.cte_' + suffix).attr('aria-expanded', 'true');

});