Question

我希望我的jQuery手风琴标题中的文字在＆＃34;编辑＆＃34;之间切换。并且＆＃34;关闭＆＃34; - 当打开和关闭单个面板时，我可以使它工作，但是如果我打开面板并单击另一个面板，则前一个面板关闭但文本仍然显示＆＃34;关闭。＆＃34;

我还在学习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

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

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

Answer 2

只需将所有切换设置为＆＃34;编辑＆＃34;无论何时单击一个，然后使用ui-state-active类在激活的标题上设置文本，如下所示：

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

请参阅full jsfiddle。

Answer 3

您需要的功能是：

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

我希望这会对你有所帮助

<强>更新

  $(".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 4

DEMO

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

$(".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 5

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";
      })
   });

感谢您提供这些解决方案！

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

5 个答案: