Question

很难在一个小标题中将此作为一个问题。

基本上，我有一个div：

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

可由用户点击，当点击该div时，我希望另一个div显示为具有类似的ID：

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

有没有一种方法，当点击前div时，我可以选择使用后者。我对site2,3,4等有相同的div组合。我想的是：

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

我知道上面的内容不会起作用，但我不确定最好的方法是什么。我希望现在的问题更清楚了。

Answer 1

使用：

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

<强> Working Fiddle

Answer 2

你需要使用this.id而不是这个来获取id。将此事件源对象id与字符串“_desc”连接起来。您还需要在选择器的开头使用#作为id选择器。

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

Answer 3

您可以使用this.id获取所点击项目的ID，同时您在选择器中缺少引号，并且需要将#放在ID选择器之前。

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

+可用于连接

Answer 4

在单击元素的数据属性中指定目标：

<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的可折叠菜单。

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

4 个答案: