Question

我正在使用在页面上出现两次的html组件。

我遇到的问题是当我点击一个组件切换它的内容（如手风琴）时，两个组件同时切换。

当我单独点击它们时，如何重写JS以切换每个组件，而不给组件不同的类并重写js两次？

这是我到目前为止所拥有的;

var bindEventsToUI = function () {        
        $(".details").click(function(e){
            $(".content").slideToggle("slow", function() {
                $(e.target).hide().siblings().show();
            });
        });
    };

Answer 1

试试这个：

$(".details").click(function(e) {
  $(this).children(".content").slideToggle("slow");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='details'>Testing 123
  <div class='content'>> Content 123</div>
</div>
<div class='details'>Testing 456
  <div class='content'>> Content 456</div>
</div>

Answer 2

您需要为每个元素使用不同的标识符。我建议id：

var bindEventsToUI = function () {//element) {        
    $("#id1 .details").click(function(e){
        $("#id1 .content").slideToggle("slow", function() {
            $(e.target).hide().siblings().show();
        });
    });
    $("#id2 .details").click(function(e){
        $("#id2 .content").slideToggle("slow", function() {
            $(e.target).hide().siblings().show();
        });
    });
    //..and so on
};

或者，您可以使用closest功能：

var bindEventsToUI = function () {//element) {        
    $(".details").click(function(e){
        $(this).closest(".content").slideToggle("slow", function() {
            $(e.target).hide().siblings().show();
        });
    });
};

切换在页面上出现两次的元素

2 个答案: