다음과 유사한 HTML 코드가 있습니다.
<div class="col-md-7">
<div class="row launch">
<img class="img-responsive" alt=""><br/>
</div>
<ul class="row gallery">
<a href="" class="light-link col-xs-6 col-sm-4 col-md-3 ">
<img src=""/>
</a>
</ul>
</div>
<div class="col-md-7">
<div class="row launch">
<img class="img-responsive" alt=""><br/>
</div>
<ul class="row gallery">
<a href="" class="light-link col-xs-6 col-sm-4 col-md-3 ">
<img src=""/>
</a>
</ul>
</div>
내가하려는 것은 (JQuery를 사용하여) 사용자가 첫 번째 div "행 실행"을 클릭하여 다음 형제 ul "행 갤러리"내부의 "라이트 링크"링크로 뭔가를 수행 할 때입니다. 나는 두 번째 div "행 시작"과 같은 것을 원하고, 아래 형제 내부의 링크 등을 원한다. 내가 뭘 잘못하고 있니? 내 코드는 다음과 같습니다.
$('.launch').click(function(){
$('.launch').next().children("a:first").trigger('click');
});
하지만 작동하지 않습니다 . 목록에서 두 번째 div "row launch"를 클릭하거나 세 번째를 클릭하더라도 항상 목록의 첫 번째 ul에 "light-link"이벤트를 첨부합니다. 참고 : 필요 lightgallery 예제 (클래스를 사용하는 여러 갤러리)의 경우 사용자가 기본 큰 이미지를 클릭 할 때 축소판에 클릭을 트리거하고 관련 갤러리를 활성화하고 싶었습니다.
당신은을 사용 siblings하고 children. 네이티브 클릭을 트리거하려면를 사용한 get다음 해당 click함수를 사용하여 트리거해야합니다.
$('.launch').click(function(){
$(this).siblings('ul').children(".light-link").get(0).click();
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7">
<div class="row launch">
<img class="img-responsive" alt="pic1"><br/>
</div>
<ul class="row gallery">
<a href="" class="light-link col-xs-6 col-sm-4 col-md-3 ">
<img src="google.com" alt="pic link1"/>
</a>
</ul>
</div>
<div class="col-md-7">
<div class="row launch">
<img class="img-responsive" alt="pic2"><br/>
</div>
<ul class="row gallery">
<a href="" class="light-link col-xs-6 col-sm-4 col-md-3 ">
<img src="" alt="pic link2"/>
</a>
</ul>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다