javascript - 尝试将元素 ID 转换为 jQuery 中的类选择器

Question

这是我的jsfiddle：

http://jsfiddle.net/fk434/

编码：

$('.theHider').click(function () {
    $("'." + $(this).id + "'").hide();
});

的HTML：

<div class="cola">This will be cola</div>
<div class="cola">This will be cola</div>
<div class="birch">This will be birch</div>
<div class="cola">This will be cola</div>
<div class="cola">This will be cola</div>
<div class="orange">This will be orange</div>
<div class="birch">This will be birch</div>
<div id="cola" class="theHider">This will hide cola</div>
<div id="birch" class="theHider">This will hide birch</div>
<div id="orange" class="theHider">This will hide orange</div>

我不明白为什么这不起作用。

至于准备好文档等，我在阻止 jsfiddle 工作时将其取出。

Answer 1

id是 DOM 元素本身的属性，而不是 jQuery 包装器，所以它应该是this.id，而不是$(this).id. 您还需要删除一些无关的引号：

$('.theHider').click(function () {
    $("." + this.id).hide();
});

Answer 2

是您的报价使它无法正常工作，选择器无效。尝试这个：

$('.' + this.id).hide();

Answer 3

没有$(selector).id将 javascript 元素与此 jquery 元素混合的字段。

尝试这个：

$('.theHider').click(function() {
  var selector = "."+$(this).prop("id");
  $(selector).hide();
});

Answer 4

这里的问题是您在选择器中插入了太多引号。

$( "'." + this.id + "'" ).hide();
// ^----------------^------ these are not needed

您不必添加单引号 - 只需正常构建您的选择器 -

$( "." + this.id ).hide();

这是您的小提琴的固定版本

当您遇到问题时，请务必检查您的 JavaScript 控制台。使用您的原始代码，与您正在构建的选择器在同一行出现此错误：

未捕获的错误：语法错误，无法识别的表达式：'.cola'

Answer 5

这将解决问题：

$('.' + this.id)

但是，我想提请您注意数据属性：

<div class="theHider" data-tohide="cola">This will hide cola</div>

如果需要，这允许您将标识符用于其他用途；点击处理程序如下所示：

$('.theHider').on('click', function() {
    $('.' + $(this).data('tohide')).hide();
});