0

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>

查询：

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

基本上我想要做的是，当我单击列表中的一个链接时，它会将“somediv”的内容替换为具有与链接的 id 匹配的类的 div 的内容。

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

4

4 回答 4

2

做这个

$("#a1").click(function() {
    var divClass = $(this).attr("id");
    $("#somediv").empty().append($("."+divClass).html());
});
于 2013-05-02T01:57:51.300 回答
1

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.
});
于 2013-05-02T01:58:44.403 回答
1 
$('a').click(function (e) {
    $('#somediv').html($('.' + $(this).attr('id'))).text();
    e.preventDefault();
});

jsFiddle 示例

于 2013-05-02T02:00:30.783 回答
1

我建议您稍微修改您的代码以接受新的 HTML5 规范。更具体地说，使用aria-owns这正是您在这里所做的。见演示。

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;
});
于 2013-05-02T02:12:14.343 回答