Question

HTML：

<ul>
    <li><a href="#" id="a1">This is Link 1</a></li>
    <li><a href="#" id="a2">This is Link 2</a></li>
    <li><a href="#" id="a3">This is Link 3</a></li>
</ul>

<div id="somediv">                
</div>

<div class="a1">div 1</div>
<div class="a2">div 2</div>
<div class="a3">div 3</div>

JQUERY：

$('a').on('click', function(e) {
    $('#somediv').html($('."this.id"').text());
    e.preventDefault();
});

基本上我想要做的是，当我点击列表中的一个链接时，它会替换＆＃34; somediv＆＃34;使用具有与链接的id匹配的类的div的内容。

换句话说，当我点击链接ID＆＃34; a1＆＃34;时，我希望它显示类＆＃34; a1＆＃34;在＆＃34; somediv＆＃34;。我只是不知道如何在jquery的第二行调用它的语法。

Answer 1

这样做

$("#a1").click(function() {
    var divClass = $(this).attr("id");
    $("#somediv").empty().append($("."+divClass).html());
});

Answer 2

http://jsfiddle.net/vD4hA/

唯一的问题是你的连接。

您不需要使用$(this).attr('id')，因为上下文中的this是DOM元素，而id或任何属性都可以直接作为对象属性检索。

$('a').on('click', function(e) {
    $('#somediv').html($('div.' + this.id).text()); // You probably dont need 'div.' 
   //but it is safe to use as you are not selecting based on id(unique) but a class which      
    //can be in multiple places.
});

Answer 3

$('a').click(function (e) {
    $('#somediv').html($('.' + $(this).attr('id'))).text();
    e.preventDefault();
});

<强> jsFiddle example

Answer 4

我建议您稍微修改一下代码以接受新的HTML5规范。更具体地说，使用aria-owns，这正是你在这里所做的。请参阅demo。

HTML

<ul>
    <li><a href="#" id="a1" aria-owns="div1">This is Link 1</a></li>
    <li><a href="#" id="a2" aria-owns="div2">This is Link 2</a></li>
    <li><a href="#" id="a3" aria-owns="div3">This is Link 3</a></li>
</ul>

<div id="somediv">                
</div>

<div style="display:none;">
    <div id="div1">div 1</div>
    <div id="div2">div 2</div>
    <div id="div3">div 3</div>
</div>

JS

$("a[aria-owns]").on("click", function(e) {
   $("#somediv").empty()
       .append($("#" + $(this).attr("aria-owns")).clone());
   return e.preventDefault(), false;
});

你如何找到一个变量类的div？

4 个答案:

HTML

JS