为何jQuery中$(".unhide-btn").prop("disabled", false)无法生效？

代码未达预期的核心问题是**$("button")选择器匹配范围过大，后续属性赋值覆盖了前序的状态设置**：

• 你的Hide按钮点击回调中，先执行$(".unhide-btn").prop("disabled", false)将Unhide按钮设为可用
• 下一行直接执行$("button").prop("disabled", true)，这个选择器会选中页面内所有<button>标签，包括刚被设为可用的Unhide按钮，直接把它的disabled属性又改回了true，前一行的操作完全被覆盖
• Unhide按钮的点击回调中也存在相同问题，通用选择器会无差别修改所有按钮状态，和你预期的「两个按钮状态互斥切换」逻辑冲突

不要用无差别的$("button")选择器操作所有按钮，给两个按钮做独立标识，精准修改目标元素状态即可。

方案1：给按钮加专属类（逻辑清晰，推荐） #

先给HTML里的Hide按钮加上专属类，方便精准选择：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <script src="script.js"></script>
  <p>Hide me!</p>
  <button class="hide-btn">Hide</button>
  <button class="unhide-btn">Unhide</button>
</body>

对应调整JS逻辑，只操作目标按钮的状态：

$(document).ready(function() {
  // 初始状态：Unhide按钮禁用
  $(".unhide-btn").prop("disabled", true)
  // Hide按钮点击逻辑
  $(".hide-btn").click(function() {
    $("p").hide()
    $(".hide-btn").prop("disabled", true)
    $(".unhide-btn").prop("disabled", false)
  })
  // Unhide按钮点击逻辑
  $(".unhide-btn").click(function() {
    $("p").show()
    $(".unhide-btn").prop("disabled", true)
    $(".hide-btn").prop("disabled", false)
  })
})

方案2：不改HTML，用$(this)指代当前触发元素 #

如果不想调整HTML结构，可以在事件回调里通过$(this)拿到当前点击的按钮，搭配筛选选择器实现状态切换，代码更精简：

$(document).ready(function() {
  $(".unhide-btn").prop("disabled", true)
  $("button").click(function() {
    // 判断当前点击的是不是Hide按钮
    if (!$(this).hasClass("unhide-btn")) {
      $("p").hide()
      $(this).prop("disabled", true)
      $(".unhide-btn").prop("disabled", false)
    } else {
      $("p").show()
      $(this).prop("disabled", true)
      $("button:not(.unhide-btn)").prop("disabled", false)
    }
  })
})

内容的提问来源于stack exchange，提问作者IWannaAnswerQuestions