javascript - 虽然单击三个按钮之一不能禁用其他两个 jQuery

Question

我正在开发一个测试。我想在单击其中一个按钮时禁用三个按钮中的两个，并在选择其中一个选项时在按钮下添加 slideDown() 注释。我设法使评论向下滑动，但在按下其他按钮时无法禁用其他评论。我正在使用 jQuery。我已经阅读了许多可能的解决方案，但它们似乎不适用于我的情况。

这是我的一段代码:

        <div class="btns">
            <button class="btn" id="q1b1" value=0>A</button>
            <button class="btn" id="q1b2" value=1>B</button>
            <button class="btn" id="q1b3" value=0>C</button>
        </div>
        <div class="content">
            <div class="com" id="q1com1">
                <p>
                    comment1
                </p>
            </div>
            <div class="com" id="q1com2">
                <p>
                    comment2
                </p>
            </div>
            <div class="com" id="q1com3">
                <p>
                    comment3
                </p>
            </div>
        <script>
            $(document).ready(function(){
                if($('#q1b1').click(function(){
                    $('#q1com1').slideDown(500);
                    $('#q1b2', '#q1b3').prop('disabled', true);
                }));
                else if($('#q1b2').click(function(){
                    $('#q1com2').slideDown(500);
                    $('#q1b1', '#q1b3').prop('disabled', true);
                }));
                else if($('#q1b3').click(function(){
                    $('#q1com3').slideDown(500);
                    $('#q1b1', '#q1b2').prop('disabled', true);
                }));
            });
        </script>    
        </div>

Answer 1

不要将点击事件处理程序放在 if 条件中。您需要为每个按钮分配它自己的加载点击处理程序，然后在事件发生时运行代码。

为了尽可能简单，您可以为所有按钮分配相同的事件处理程序，然后通过其 index 将按钮关联到适当的 .com div。试试这个:

$(document).ready(function() {
  var $comments = $('.content .com');

  var $btns = $('.btn').click(function() {
    $btns.not(this).prop('disabled', true);
    var index = $(this).index();
    $comments.eq(index).slideDown(500);
  });
});

.com { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btns">
  <button class="btn">A</button>
  <button class="btn">B</button>
  <button class="btn">C</button>
</div>
<div class="content">
  <div class="com">
    <p>comment1</p>
  </div>
  <div class="com">
    <p>comment2</p>
  </div>
  <div class="com">
    <p>comment3</p>
  </div>
</div>

请注意，这种方法消除了对 id 属性的需要，因此可以无限扩展，无需对 JS 逻辑进行维护。