使用jQuery，如何根据点击的元素选择另一个元素？

Question

很难用一个小标题来表达这个问题。

基本上，我有一个div元素：

<div class="sites" id="site1"></div>

当用户点击可点击的 div 元素时，我希望出现另一个具有相似 ID 的 div 元素。

<div id="site1_desc" class="description_holder">

当前div被点击时，有没有一种方法可以选择后面的div以供使用。 我在site2、3、4等站点中都有相同的div组合。 我想到了以下解决方案：

$(document).ready(function(){
   $('.sites).click(function(){
      $(this&'_desc').css({visibility: "visible"});
     });
});

我明白上面的方法行不通，但我不确定最佳实现方式。希望现在问题更清晰了。

- k4kuz0

Answer 1

使用：

$(document).ready(function(){
 $('.sites').click(function(){
   $('#'+$(this).attr('id')+'_desc').css({visibility: "visible"});
 });
});

Working Fiddle

- Milind Anantwar

---

选择器中也缺少一个引号。 - Sterling Archer

Answer 2

你需要使用this.id而不是this来获取id。将此事件源对象id与字符串"_desc"连接起来。你还需要在选择器开头使用#来进行id选择器。

$(document).ready(function(){
   $('.sites').click(function(){
      $("#" + this.id + '_desc').css({visibility: "visible"});
     });
});

- Adil

---

选择器中缺少引号。 - Sterling Archer

Answer 3

你可以使用this.id来获取点击项的id，另外你的选择器缺少引号并且需要在id选择器前加上#。

$(document).ready(function(){
   $('.sites').click(function(){
   //.......^..................
      $('#'+this.id+'_desc').css({visibility: "visible"});
     //....^....^..........
     });
});

"

+可以用于字符串连接

"

- Pranav C Balan

Answer 4

在被点击的元素上的data-attribute中指定目标：

<div class="sites" id="site1" data-target='site1_desc'></div>

$(document).ready(function(){
    $('[data-target]').on('click', function(){
        $('[data-target=' + $(this).data('target') + ']').show();
    }
});

如果应用了data-target，那么它将适用于任何具有该属性的元素。这种模式在许多流行的前端框架中都被使用，例如 Twitter Bootstrap 的可折叠菜单。

- Faust