jquery 字母和数字按钮

Question

$(function() {
    $('.btn').on("click", function() {
        
   var letter = $(this).text()[0];
    $('.myClass').each(function() {
    if ($(this).text()[0] == letter) {
      $(this).show();
    } else {
      $(this).hide();
    }

  });
        
   var id = this.id;
    if (id == 'allLetter') {
    $('.myClass').show();
  }
   
    $('.btn').removeClass('letterClassOnClick');
  $(this).addClass('letterClassOnClick');
         
});
});

<button class="btn" id="aLetter" type="button">A</button>
.
.
<button class="btn" id="zLetter" type="button">Z</button>


<button class="btn" id="btn0" type="button">0</button>
.
.
<button class="btn" id="btn9" type="button">9</button>

是否可以将按钮数量减少到一个按钮？例如。 0 - 9 然后调用所有以数字开头的 myClass 元素。请看图

Answer 1

通过 jQuery 添加按钮，不要通过 HTML 编写按钮，这会使您的代码难看。首先将所有按钮添加到一个数组中，然后循环遍历它们。像这样：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
    #buttonsParentElement{
        text-align: center;
    }
    .btn{
        background: #fff;
        border: 1px solid #7755ff;
        border-radius: 2px;
        color: #7755ff;
    }
</style>
<script>

$(document).ready(function(){

// Add buttons when document ready
    var buttons = [{"text": "A", "id" : "aLetter"}, {"text": "B", "id" : "bLetter"}, {"text": "C", "id" : "cLetter"}, {"text": "0", "id" : "btn0"}, {"text": "1", "id" : "btn1"}, {"text": "9", "id" : "btn9"}];
    for(var i = 0; i < buttons.length; i++){
      var btn = buttons[i]; 
      $("#buttonsParentElement").append('<button class="btn" id="'+btn.id+'" type="button">'+btn.text+'</button>');
    }
    
// Handle on click event
    $("body").on("click", ".btn", function () {

        var letter = $(this).text()[0];
        $('.myClass').each(function() {
          ($(this).text()[0] == letter)?$(this).show():$(this).hide();
        });

        var id = this.id;
        if (id == 'allLetter') {
          $('.myClass').show();
        }

        $('.btn').removeClass('letterClassOnClick');
        $(this).addClass('letterClassOnClick');

    });

});
</script>
</head>
<body>
    <div id="buttonsParentElement"></div>
</body>

jquery 字母和数字按钮

jquery letter and number buttons

search

jquery

button