Блог

У меня есть этот код :

 function showContent() {
    ...
}

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

Я бы хотел, когда я нажимаю на ссылку, показывать содержимое div, не используя идентификатор или класс в качестве ссылки, но (возможно) просто это.

Как я могу это сделать?

Ну, там не так много контекста, но это один из способов:

 <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/

Это может быть сделано несколькими способами.

Вам придется обернуть «содержимое» в <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();
});
  

Если ссылка находится внутри div, вы могли бы сделать это…

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

затем в вашей функции…

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

Однако это предполагает, что div уже виден, поэтому вам не нужно будет его «показывать».

Попробуйте использовать родительский селектор jquery

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

Однако, как ссылка видна, если содержащий div не виден?