javascript - 重构 jQuery 以使用 $(this) 并从另一个元素添加/删除类

Question

所以我有这个想法，我正在 Codepen 上研究。我已经让它按原样工作，但在我去添加更多可点击区域之前，我已经意识到重构和干燥东西的巨大需求。到目前为止它可以工作，但它非常丑陋，并且会涉及大量重复代码。

所以我试图用一个使用 $(this) 填充的 switch 语句替换许多 $(.class).click(function() { ... }); 函数一个 .click 函数代替。但是我迷路了。

您可以在此处查看所有内容并进行编辑:http://codepen.io/lukewatts/pen/ubtmI

我觉得我很接近，但我碰壁了。顶部注释掉的部分是 DRY 尝试，而现在未注释掉的是工作版本。单击最小、关闭、最大字词或 LED 以查看其工作情况。

非常感谢您对此提出的任何建议。老实说，PHP 是我的主要语言。

附言我有 leds.click(function() { ... }) 并将其替换为 leds.on(function() { ... }) 但仍然没有.

Answer 1

我明白你想做什么，但不是 jQuery 对象的工作原理。为了检查对象是否匹配选择器，您必须使用 .is()。 .

因此，您将无法使用 switch，但您必须使用一系列链式 if 来实现您的目标尝试，例如

if ( $this.is('.led[data-level="one"]') )
   var led = $('p.min a');
   var level = "one";

我已将您的 CodePen 示例更新为以这种方式工作: Codepen

不过，正如我在对问题的评论中提到的，我不会在这里进行任何代码审查，只是修复对您不起作用的部分。老实说，我不确定这实际上是比您的凌乱原始方法更好的方法。