Применить функцию в jquery

Question

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

(function expand() { 
 
    $('.expanded').hide(); 
 
    $(".more, .less").click(function() { 
 
    $(".expanded, .more").toggle(); 
 
    }); 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<div class="collapsed">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru<a href="#" class="more">Read more</a> 
 
</div> 
 
<div class="expanded">pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." <a href="#" class="less">Read less</a> 
 
</div> 
 
<br> 
 
<br> 
 
<br> 
 
<div class="collapsed">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru<a href="#" class="more">Read more</a> 
 
</div> 
 
<div class="expanded">pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." <a href="#" class="less">Read less</a> 
 
</div>

Answer 1

Вы должны быть ориентированы на конкретные элементы, которые связаны с щелчком. Это легче сделать, если изменить HTML, так что все целевые элементы находятся в общем контейнере, как это:

<div class="container"> 
    <div class="collapsed">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru<a href="#" class="more">Read more</a> 
    </div> 
    <div class="expanded">pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." <a href="#" class="less">Read less</a> 
    </div> 
</div> 

Затем вы можете настроить таргетинг только соответствующие элементы с помощью $(this).closest(".container"), чтобы получить родительский контейнер, а затем использовать .find(...) в этом контейнере, чтобы найти соответствующие элементы, которые находятся в том же контейнере щелчка, как это:

(function expand() { 
    $('.expanded').hide(); 
    $(".more, .less").click(function(e) { 
    e.preventDefault(); 
    $(this).closest(".container").find(".expanded, .more").toggle(); 
    }); 
})(); 

---

это может быть сделано без добавления контейнера DIV, но это сделает ваш код гораздо более восприимчивым взломать, если HTML изменяется каким-либо образом, поэтому концепция контейнера гораздо более надежна. Он также позволяет использовать CSS для управления интервалом между группами, а не с использованием тегов <br>, который, как правило, более гибкий.

Answer 2

Изолировать их:

(function expand() { 
 
    $('.expanded').hide(); 
 
    $(".more, .less").click(function() { 
 
    $(this).closest('.expandable').find(".expanded, .more").toggle(); 
 
    }); 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<div class="expandable"> 
 
    <div class="collapsed">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru<a href="#" class="more">Read more</a> 
 
    </div> 
 
    <div class="expanded">pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." <a href="#" class="less">Read less</a> 
 
    </div> 
 
</div> 
 
<br> 
 
<br> 
 
<br> 
 
<div class="expandable"> 
 
    <div class="collapsed">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru<a href="#" class="more">Read more</a> 
 
    </div> 
 
    <div class="expanded">pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." <a href="#" class="less">Read less</a> 
 
    </div> 
 
</div>

Или ручка .more и .less по-разному:

(function expand() { 
 
    $('.expanded').hide(); 
 
    $(".more").click(function() { 
 
    $(this).closest(".collapsed").next(".expanded").add(this).toggle(); 
 
    }); 
 
    $(".less").click(function() { 
 
    var $expanded = $(this).closest(".expanded"); 
 
    $expanded.prev('.collapsed').find('.more').add($expanded).toggle(); 
 
    }); 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<div class="collapsed">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru<a href="#" class="more">Read more</a> 
 
</div> 
 
<div class="expanded">pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." <a href="#" class="less">Read less</a> 
 
</div> 
 
<br> 
 
<br> 
 
<br> 
 
<div class="collapsed">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru<a href="#" class="more">Read more</a> 
 
</div> 
 
<div class="expanded">pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." <a href="#" class="less">Read less</a> 
 
</div>