Question

我有这段代码：

function showContent() {
    ...
}

<div id="example">
    content
    <a href="#" onClick="showContent();return false">Link</a>
</div>

我想，当我点击链接时，显示div的内容，而不使用id或类作为参考，但（可能）简单此

我该怎么做？

Answer 1

嗯，没有很多背景，但这是一种方式：

<div id="example">
 <p style="display: none;">content</p>
 <a href="#" onClick="showContent(this);return false">Show content above</a>
</div>

function showContent(el) {
    $(el).parent().children(':first-child').show();
}

http://jsfiddle.net/LeVFb/

或者，如果您想要显示所有内容（我认为:not在这种情况下并不重要*）：

function showContent(el) {
    $(el).parent().children(':not(a)').show();
}

*事实上，除非你有特殊理由不这样做，否则我会继续说下去：

function showContent(el) {
    $(el).parent().children().show();
}

这取决于您尝试显示的内容以及是否有任何A标记display: hidden并且需要显示。

http://jsfiddle.net/LeVFb/2/

这可以采取多种方式。

Answer 2

你将不得不将“内容”包装在<div>（或其他一些块元素）中：

<div id="example">
    <div style="display: none;">content</div>
    <a href="javascript:void(0)" onClick="showContent(this)">Link</a>
</div>

不要将href="#"用于这些类型的链接，href="javascript:void(0)"是一个更好的选择，可以减少问题; void(0)方法也意味着您的点击处理程序中不需要return false来阻止浏览器尝试解释空片段。

返回我们的定期计划。然后，您的showContent变得非常简单：

function showContent(e) {
    $(e).prev('div').show();
}

更好的方法是使用jQuery绑定点击处理程序：

<div id="example">
    <div style="display: none;">content</div>
    <a href="javascript:void(0)">Link</a>
</div>

然后：

$('#example a').click(function() {
    $(this).prev('div').show();
});

Answer 3

尝试使用jquery parent选择器

$(this).parent('div').show()

但是，如果包含div不是？

，链接如何可见

Answer 4

如果链接在div中，你可以这样做......

<a href="#" onClick="showContent(this);return false">Link</a>

然后在你的函数中......

function showContent(link){
     alert($(link).parent().html());
}

但是，这假设div已经可见，因此您不需要“显示”它。

jQuery - 通过没有id / class引用的链接显示div的内容

4 个答案: