동적으로 생성되는 여러 목록이있는 페이지가 있습니다. 이러한 목록은 슬라이더를 만드는 이미지로 구성되어 있으므로 화살표를 클릭하여 다음 또는 이전 이미지를 볼 수 있습니다. 그러나 지금은 이전 또는 다음 버튼을 클릭 할 때마다 페이지의 모든 목록에 영향을줍니다. 이벤트 전파를 중지하고 클릭이 발생하는 목록에만 영향을 미치도록이 코드를 수정하려면 어떻게해야합니까?
이것은 기본 HTML 구조입니다 (Prestashop이지만 다음과 같은 것을 생성합니다).
<div class="image-thumbs-container">
<ul class="thumbnails-custom-list">
<li> <!-- image --> </li>
<li> <!-- image --> </li>
</ul>
<div class="list-inline-controls">
<div class="list-left-control"> 〈 </div>
<div class="list-right-control"> 〉 </div>
</div>
</div>
var $first = $('li:first', 'ul.thumbnails-custom-list'),
$last = $('li:last', 'ul.thumbnails-custom-list');
$(".list-right-control").click(function () {
var $next, $selected = $(".selected");
$next = $selected.next('li').length ? $selected.next('li') : $first;
$selected.removeClass("selected");
$next.addClass('selected');
});
$(".list-left-control").click(function () {
var $prev, $selected = $(".selected");
$prev = $selected.prev('li').length ? $selected.prev('li') : $last;
$selected.removeClass("selected");
$prev.addClass('selected');
});
이것은 트릭을 할 것입니다.
이제 "화살표"는 클릭 한 화살표가있는 li내부 에만 영향을줍니다 div class="image-thumbs-container".
$(".list-right-control").click(function() {
var $first = $(this).closest(".image-thumbs-container").find('ul.thumbnails-custom-list li:first');
var $next, $selected = $(this).closest(".image-thumbs-container").find(".selected");
$next = $selected.next('li').length ? $selected.next('li') : $first;
$selected.removeClass("selected");
$next.addClass('selected');
});
$(".list-left-control").click(function() {
var $last = $(this).closest(".image-thumbs-container").find('ul.thumbnails-custom-list li:last');
var $prev, $selected = $(this).closest(".image-thumbs-container").find(".selected");
$prev = $selected.prev('li').length ? $selected.prev('li') : $last;
$selected.removeClass("selected");
$prev.addClass('selected');
});.selected {
color: yellow
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-thumbs-container">
<ul class="thumbnails-custom-list">
<li>
img
</li>
<li>
img
</li>
</ul>
<div class="list-inline-controls">
<div class="list-left-control"> 〈 </div>
<div class="list-right-control"> 〉 </div>
</div>
</div>
<div class="image-thumbs-container">
<ul class="thumbnails-custom-list">
<li>
img
</li>
<li>
img
</li>
<li>
img
</li>
<li>
img
</li>
</ul>
<div class="list-inline-controls">
<div class="list-left-control"> 〈 </div>
<div class="list-right-control"> 〉 </div>
</div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다