超出范围但在范围内的变量

Question

我有一个 jquery 函数，可以将事件侦听器添加到各种元素以在单击时执行。出于某种原因，当我尝试在函数内部引用全局变量 (daySelected) 时，它说它未定义。我错过了什么吗？

var daySelected = false;

$('.deal-day').bind('click', function(e) {
  console.log("Day Selected: " + daySelected);
  if (!daySelected) {
    if($(this).hasClass('selected-filter')) {
      $(this).removeClass('selected-filter');
      var daySelected = false;
    } else {
      $(this).addClass('selected-filter');
      var daySelected = true;
    }
  }
});

Answer 1

您有多个 var daySelected.
var 应该只定义一次。否则你正在创建新的范围。

作为一般性修复，您可以像这样改进代码：

let daySelected = false;         // Feel free to change this boolean
const $dealDay = $(".deal-day"); // Get all buttons with that class
const toggleDaySelectedButtons = () => $dealDay.toggleClass("selected-filter", daySelected); 

$dealDay.on("click", function(e) {
  daySelected = !daySelected; // Toggle boolean
  toggleDaySelectedButtons(); // Handle buttons
});

toggleDaySelectedButtons(); // Do on DOM ready

.selected-filter {background: gold;}

<button type="button" class="deal-day">Filter deal day</button>
<hr>
<button type="button" class="deal-day">Filter deal day</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

我真的希望你只有一个 .deal-day 按钮 - 否则以上将不理想

超出范围但在范围内的变量

Variable out of scope but in scope

javascript

jquery

scope