如何在jQuery手风琴的标题中切换文本？

我希望我的jQuery手风琴的标题中的文字在“编辑”和“关闭”之间切换 – 我可以在切换单个面板打开和关闭时使其工作，但是如果我打开面板并单击其他面板，上一个面板关闭但文本仍然显示“关闭”。

我还在学习jQuery和JavaScript。 我已经试了几个小时，但似乎无法找到解决方案。 任何建议都将非常感谢！

这个jQuery允许我在一个面板上成功切换文本：

$(function(){ $(".details-toggle").click(function () { $(this).find(".edit-toggle").text(function(i, text){ return text === "edit" ? "close" : "edit"; }) }); 

JSFIDDLE演示： http ： //jsfiddle.net/dylanstewart/nvhsyx6n/

Answer 1

只要单击一个，就可以将所有切换设置为“编辑”，然后使用ui-state-active类在激活的标题上设置文本，如下所示：

 $(".details-toggle").click(function () { $(".edit-toggle").text("edit"); $(".ui-state-active").find(".edit-toggle").text("close"); }); 

查看完整的jsfiddle 。

Answer 2

DEMO

将accordion 所有 .edit-toggle元素设置为“编辑”，如下所示：

 $(".details-toggle").click(function () { $(this).closest('.ui-accordion').find('.edit-toggle').not($('.edit-toggle', this) ).text('edit'); $(this).find(".edit-toggle").text(function(i, text){ return text === "edit" ? "close" : "edit"; }); }); 

注意：您不希望全局更改.edit-toggle元素; .closest() ... find()会让你进入click源的手风琴。

Answer 3

JozefDúc和mattingly890的解决方案都非常完美。 如果你没有使用jQuery UI CSS框架，JozefDúc的解决方案是理想的。 如果你正在使用jQuery UI CSS框架，那么mattingly890的解决方案是理想的，因为它通过使用.ui-state-active类需要更少的代码。 针对不同场景的两种有效解决方

如果您正在使用带有手风琴的jQuery UI CSS框架，请​​使用mattingly890的解决方案：

 $(".details-toggle").click(function () { $(".edit-toggle").text("edit"); $(".ui-state-active").find(".edit-toggle").text("close"); }); 

如果你没有使用jQuery UI CSS框架和手风琴使用JozefDúc的解决方案：

 $(function(){ $(".details-toggle").click(function () { text = $(this).find(".edit-toggle").text(); $(".edit-toggle").text("edit"); $(this).find(".edit-toggle").text(text); $(this).find(".edit-toggle").text(function(i, text){ return text === "edit" ? "close" : "edit"; }) }); 

谢谢你们的解决方案！

Answer 4

你需要的function是：

 $(".details-toggle").click(function () { $('.details-toggle').find('.edit-toggle').text('edit'); $(this).find(".edit-toggle").text(function(i, text){ return text === "edit" ? "close" : "edit"; }) }); 

我希望这能帮到您

UPDATE

  $(".details-toggle").click(function () { $('.details-toggle').find('.edit-toggle').not($(this).find('.edit-toggle')).text('edit'); $(this).find(".edit-toggle").text(function(i, text){ return text === "edit" ? "close" : "edit"; }); }); 

Answer 5

 $(function() { $(".details-toggle").click(function () { text = $(this).find(".edit-toggle").text(); $(".edit-toggle").text("edit"); $(this).find(".edit-toggle").text(text); $(this).find(".edit-toggle").text(function(i, text){ return text === "edit" ? "close" : "edit"; }) }); $("#accordion").accordion({ header: "h3", collapsible: true, active: false }); }); 

保存以前的文本，然后更改要编辑的所有内容，切换回文本并进行更改。 小提琴就在这里