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属性（就像你自己建议的那样）。

您可以通过执行

访问已单击的元素

var element = $(this)

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

你现在正在做的是找到所有具有“后退”和“前面”类的元素并在其上应用你的转换。

如果你需要一个元素'close'到已被点击的元素，使用函数foo.closest（'。back'），它返回传递的选择器找到的最接近的元素。

Answer 2

所以我找到了解决方案：

我刚才改为：

  $('.edit-changes').on('click', function () {

      $(this).closest('.flip').find('.back').css('transform', 'rotateY(0deg)');
      $(this).closest('.flip').find('.front').css('transform', 'rotateY(180deg)');
  });

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

来自

  $('.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)');
  });

我只需找到最近的编辑和保存父版。

<强> Working demo

如何为id和类重用相同的函数？

2 个答案: