Question

这是我的jsfiddle：

代码：

$('.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();

Here is a fixed version of your fiddle

确保在遇到问题时检查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();
});

试图在jQuery中将元素ID转换为类选择器

5 个答案: