javascript - 如何为 ID 和类重用相同的函数？

Question

我当前的代码有效，但会影响所有元素，而不仅仅是我想要的元素。我已经用类和 ID 尝试过这个，所以我认为这不是问题所在。

我期望的是我的 Javascript 只会影响所选元素，而不是所有元素。 Here's a demo .

HTML

<div class="mainPageDiv">
    <div class="dashBoardContainer">
        <div class="dbContainer1 column">
            <div class="flip">
                <div class=" card">
                    <div class="face front">
                        <div class=" portlet   ">
                            <div class="portlet-header"> <span class="red text-uppercase"> edit button works</span>

                                <div class="dropdown pull-right "> <span class="pull-right ">
                            <span class=""  id="edit-changes"><a href="#" > Edit <span class="glyphicon glyphicon-pencil pull-right flipLink" > </span> 
                                    </a>
                                    </span>
                                    </span>
                                    <hr class="hrflipForm">
                                </div>
                                <!-- portlet-content -->
                            </div>
                            <div class="portlet-content lastViewedArticle ">
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text</div>
                            <!-- portlet-header -->
                        </div>
                        <!-- portlet- -->
                    </div>
                    <!-- moveOnchange-->
                    <div class="face back">
                        <div class="inner">
                            <div class="portlet">
                                <div class="flipForm">
                                    <ul class="list-inline pull-right ">
                                        <li class="flipControl" id="save-changes"> <span class="pull-right glyphicon glyphicon-floppy-disk gi-1x opacity7 "></span>

                                        </li>
                                    </ul>
                                </div>
                                <!-- Header Closed -->
                                <div class="portlet-content lastViewedArticle ">
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text</div>
                                <!--- Portlet content -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- dbContainer1 -->
        </div>
        <div class="dbContainer2 column">
            <div class="flip">
                <div class=" card">
                    <div class="face front">
                        <div class=" portlet   ">
                            <div class="portlet-header"> <span class="red text-uppercase">  edit button doesn't works</span>

                                <div class="dropdown pull-right "> <span class="pull-right ">
                            <span class=""  id="edit-changes"><a href="#" > Edit <span class="glyphicon glyphicon-pencil pull-right flipLink" > </span> 
                                    </a>
                                    </span>
                                    </span>
                                </div>
                                <!-- portlet-content -->
                            </div>
                            <div class="portlet-content lastViewedArticle ">
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text</div>
                            <!-- portlet-header -->
                        </div>
                        <!-- portlet- -->
                    </div>
                    <!-- moveOnchange-->
                    <div class="face back">
                        <div class="inner">
                            <div class="portlet">
                                <div class="flipForm">
                                    <ul class="list-inline pull-right ">
                                        <li class="flipControl" id="save-changes"> <span class="pull-right glyphicon glyphicon-floppy-disk gi-1x opacity7 "></span>

                                        </li>
                                    </ul>
                                </div>
                                <!-- Header Closed -->
                                <div class="portlet-content lastViewedArticle ">
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text</div>
                                <!--- Portlet content -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- dbContainer2 -->
        </div>
    </div>

Javascript

$('#edit-changes').on('click', function () {
    $('.back').css('transform', 'rotateY(0deg)');
    $('.front').css('transform', 'rotateY(180deg)');
});

$('#save-changes').on('click', function () {
    $('.front').css('transform', 'rotateY(0deg)');
    $('.back').css('transform', 'rotateY(180deg)');
});

$(function () {
    $(".column").sortable({
        connectWith: ".column",
        handle: ".portlet-header",
        cancel: ".portlet-toggle",
        placeholder: "portlet-placeholder ui-corner-all"
    });

    $(".portlet")
        .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
        .find(".portlet-header")
        .addClass("ui-widget-header ui-corner-all");

    $(".portlet-toggle").click(function () {
        var icon = $(this);
        icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
        icon.closest(".portlet").find(".portlet-content").toggle();
    });
});

Answer 1

首先你不应该对同一页面上的多个元素使用相同的 id，为此使用 class 属性(就像你自己建议的那样)。

通过doing可以访问被点击的元素

var element = $(this)

有关此类事件中此类关键字的更多信息，请阅读 this

您现在正在做的是找到所有具有类“back”和“front”的元素，并对它们应用您的转换。

如果您需要一个元素“接近”被点击的元素，请使用函数 foo.closest('.back')，它返回由传递的选择器找到的最接近的元素。