我当前的代码有效，但会影响所有元素，而不仅仅是我想要的元素。我已经用类和 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();
});
});
最佳答案
首先你不应该对同一页面上的多个元素使用相同的 id，为此使用 class 属性(就像你自己建议的那样)。
通过doing可以访问被点击的元素
var element = $(this)
有关此类事件中此类关键字的更多信息，请阅读 this
您现在正在做的是找到所有具有类“back”和“front”的元素，并对它们应用您的转换。
如果您需要一个元素“接近”被点击的元素，请使用函数 foo.closest('.back')，它返回由传递的选择器找到的最接近的元素。
关于javascript - 如何为 ID 和类重用相同的函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32582739/