JavaScript 没有触发语法错误？

Question

我无法启动此脚本。我确实注意到它说背景不是一个定义的术语？我多年来一直使用相同的脚本设置，只是无法弄清楚我哪里出错了。应该发生的 Action 看起来像 this .当点击 5 个英雄子部分中的任何一个时，他们应该接管英雄并删除它的背景。

codepen

function showHidden() {
  var alreadyTrue = $(this).find('.hovershow').css('display');
  if (alreadyTrue == 'none') {
    var swapBg = $(this).css('background');
    $('.color-list').css('background', swapBg)
    $('.closecolor').css('display', 'block');
    $('.color-list .container').css('background', 'transparent');
    $(this).css('background', 'rgba(0,0,0,0.5)');
    $(this).children('.hoverhide').fadeOut(250).css('display', 'none');
    $('.color').not(this).css('display', 'none');
    $(this).width('100%');
    $(this).find('.hovershow').css({
      'display': 'block',
      'opacity': '1'
    });
  } else {
    $('.color').width('20%');
    $('.hovershow').css({
      'display': 'none',
      'opacity': '0'
    });
    $('.hoverhide').css({
      'display': 'block',
      'opacity': '1'
    });
  }
};

$('.color').click(function() {
  showHidden();
  console.log('not working');
});

Answer 1

this 在您的 showHidden 函数中未定义。您应该将它从事件处理程序传递给函数:

$('.color').click(function() {
  showHidden(this);
  console.log('not working');
});

function showHidden(el) {
    // use el or something else here insted of this (this is a reserved word)
    var alreadyTrue = $(el).find('.hovershow').css('display');

    // rest of the code
});