щелкните ссылку из альтернативного элемента с помощью jquery

StackOverflow https://stackoverflow.com//questions/12654335

Вопрос

Несмотря на то, что существует много хороших ресурсов по обходу DOM с помощью jQuery, мне не повезло с моим примером.

На моем сайте www.smithgrey.co.uk у меня есть серия галерей миниатюр, перед каждой из которых есть раздел «заголовок раздела».

Чего я хочу добиться, так это когда вы первым нажимаете на div 'section-title' <a href> ссылка на миниатюру справа будет нажата.

Существует несколько экземпляров class="section-title" – К сожалению, я не могу добавить какие-либо идентификаторы или классы, поскольку они генерируются динамически, и меня попросили сохранить их такими, какие они есть, если это возможно.

HTML выглядит следующим образом:

<body>
  <div id="content-grid">
    <div class="section-title">
      <span class="section-title-type">Title of the first thumbnail gallery</span>
    </div>

    <div class="index-article">
      <a href="#" class="fancybox">
        <img src="thumbnail-1">
      </a>
    </div>

    <div class="section-title">
      <span class="section-title-type">Title of the second thumbnail gallery</span>
    </div>

    <div class="index-article">
      <a href="#" class="fancybox">
        <img src="thumbnail-2">
      </a>
    </div>

    <div class="index-article">
      <a href="#" class="fancybox">
        <img src="thumbnail-3">
      </a>
    </div>

    <div class="index-article">
      <a href="#" class="fancybox">
        <img src="thumbnail-4">
      </a>
    </div>   
  </div>
</body>

И вот мой jQuery на данный момент, но он не дает того результата, который я мог себе представить, потому что он щелкнет ссылку независимо от того, нажму ли я первую или вторую <div class="section-title">.

$('div.section-title').click( function(){
       $(this).parent().next($('div.index-article')).children('a.fancybox').click();
     });

Решение:

С помощью других комментаторов мне удалось выяснить, как заставить это работать так, как я ожидал:

$(document).ready(function() {
  $('div.section-title').click( function(){
    $(this).next('.index-article').find('a.fancybox:first').click();
  });
});
Это было полезно?

Решение

Я предполагаю, что вы правильно настроили jQuery с соответствующим событием готовности и т. д.Вот как бы я это сделал.Обратите внимание, что я добавил событие щелчка к гиперссылке, чтобы имитировать щелчок в примере jsfiddle.

http://jsfiddle.net/lucuma/s9mds/

$('div.section-title').click(function(e) {
    $(this).next('div').find('a:eq(0)').click(); 
});​

Другие советы

Использовать это

 $(document).ready(function() {
   $('div.section-title').click( function(){
     $(this).closest($('div.index-article').find('a.fancybox').click();
   });
});
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top