Question

我正在从数组创建按钮。单击一个按钮时，它将隐藏其他按钮，并且该按钮的属性从“ aria-pressed =“ false””更改为“ aria-pressed =“ true””。第二次单击该按钮应该撤消所有操作（显示所有按钮，并将单击的按钮的属性更改回“ false”）。单击两次按钮当前会再次显示所有按钮，但属性仍为'aria-pressed =“ true”'

这是否需要以其他方式构建？还是使用当前方法可以解决问题？

$(document).ready(function () {

    var markerArray = [];

    markerArray.push({ 
        markerAlternativeName: 'Study',
        markerId: 'study'
    });
    markerArray.push({ 
        markerAlternativeName: 'Relax',
        markerId: 'relax'
    });
    markerArray.push({ 
        markerAlternativeName: 'Eat',
        markerId: 'eat'
    });
    markerArray.push({
        markerAlternativeName: 'Gather with friends',
        markerId: 'gather'
    });

    for (var l in markerArray) {
        //build nav
        $('div.buttons').append('<button class="bttn" id="' + markerArray[l].markerId + '" tabindex="0" aria-pressed="false">' + markerArray[l].markerAlternativeName + '</button>');
        
        var markerID = markerArray[l].markerId;

        (function (mrkr) {

            //create click actions  
            $('#'+ mrkr ).on("click", function () {
                console.log("Clicked button: " + mrkr);
                $('.bttn').toggle().attr("aria-pressed","false");
                $('#'+ mrkr).show().attr('aria-pressed','true');
            });

        }(markerID))
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons"></div>

Answer 1

您需要更仔细地切换aria-pressed和可见性属性。

我创建了一个$mrkr变量，它是当前按下按钮的jQuery对象。单击该属性将始终可见，因此您只需根据先前设置为aria-pressed或true的属性来切换false。

现在还有一个$bttn jQuery对象具有除单击的按钮之外的其他按钮。这些按钮始终是toggle()色，但是无需设置其aria-pressed属性，因为它已经设置为false。

注意：可能有几种方法可以进一步清理此代码段。我特意尽可能地坚持原始代码，以专注于破坏aria-pressed属性的地方。

$(document).ready(function () {

    var markerArray = [];

    markerArray.push({ 
        markerAlternativeName: 'Study',
        markerId: 'study'
    });
    markerArray.push({ 
        markerAlternativeName: 'Relax',
        markerId: 'relax'
    });
    markerArray.push({ 
        markerAlternativeName: 'Eat',
        markerId: 'eat'
    });
    markerArray.push({
        markerAlternativeName: 'Gather with friends',
        markerId: 'gather'
    });

    for (var l in markerArray) {
        //build nav
        $('div.buttons').append('<button class="bttn" id="' + markerArray[l].markerId + '" tabindex="0" aria-pressed="false">' + markerArray[l].markerAlternativeName + '</button>');
        
        var markerID = markerArray[l].markerId;

        (function (mrkr) {

            //create click actions  
            $('#'+ mrkr ).on("click", function () {
                console.log("Clicked button: " + mrkr);
                
                var $mrkr = $('#'+ mrkr);
                var $bttn = $('.bttn').not($mrkr);
                
                $mrkr.attr("aria-pressed", $mrkr.attr("aria-pressed")=="true"?"false":"true");
                $bttn.toggle();
            });

        })(markerID)
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons"></div>

Answer 2

我建议根据被点击按钮的aria-pressed状态有条件地执行点击操作。

此外，我建议不要将单击处理程序绑定到所有.bttn元素上，而是将循环中的处理程序绑定到循环中的每个按钮。

$(document).ready(function() {

  var $container = $('.buttons');
  var markers = [];

  markers.push({
    name: 'Study',
    id: 'study'
  }, {
    name: 'Relax',
    id: 'relax'
  }, {
    name: 'Eat',
    id: 'eat'
  }, {
    name: 'Gather with friends',
    id: 'gather'
  });

  //build nav
  markers.forEach(function(marker) {
    $('<button>', {
      'class': 'bttn',
      'id': marker.id,
      'tabindex': 0,
      'aria-pressed': 'false',
      'text': marker.name
    }).appendTo($container);
  });

  //create click actions
  var $buttons = $('.bttn');

  $buttons.on("click", function() {

    var $this = $(this);

    if ($this.attr("aria-pressed") != 'true') {
      $buttons.hide().attr("aria-pressed", "false");
      $this.show().attr('aria-pressed', 'true');
    } else {
      $buttons.show().attr("aria-pressed", "false");
    }

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons"></div>

在for循环中切换属性

2 个答案: