切换每个项目的咏叹调属性

Question

我有一个show hide活动，我试图切换上的几个咏叹调属性。在下面的示例代码中，我使用了一个属性来显示我想要实现的内容。切换工作，但它适用于所有.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'); 

});