如何用JS更改文本

debugcn 发表于 Dev

乌尔姆·塞尔曼尼

我正在尝试修改此代码，因此在创建该列之后，假设我想更改其标题，因此我具有编辑按钮，一旦单击该列，我就希望能够键入和更改列标题。

有关整个代码，请单击此处。

  function Column(name) {
    if (name.length > 0) {
      var self = this; // useful for nested functions

      this.id = randomString();
      this.name = name;
      this.$element = createColumn();

      function createColumn() {
        var $column = $("<div>").addClass("column");
        var $columnTitle = $("<h3>")
          .addClass("column-title")
          .text(self.name);
        var $columnTitleEdit = $("<button>")
          .addClass("btn-edit")
          .text("Edit");
        var $columnCardList = $("<ul>").addClass("column-card-list");
        var $columnDelete = $("<button>")
          .addClass("btn-delete")
          .text("x");
        var $columnAddCard = $("<button>")
          .addClass("add-card")
          .text("Add a card");

        $columnDelete.click(function() {
          self.removeColumn();
        });
        $columnAddCard.click(function(event) {
          self.addCard(new Card(prompt("Enter the name of the card")));
        });
        $columnTitleEdit.click(function(event) {      //How to edit this code here so i can rename the title of the Column?
          self.editTitle();
        });

        $column
          .append($columnTitle)
          .append($columnDelete)
          .append($columnAddCard)
          .append($columnCardList)
          .append($columnTitleEdit);

        return $column;
      }
    } else if (name.length == 0) {
      alert("please type something");
      $(".create-column").click();
    } else {
      return;
    }
  }

  Column.prototype = {
    addCard: function(card) {
      this.$element.children("ul").append(card.$element);
    },
    removeColumn: function() {
      this.$element.remove();
    },
    editTitle: function() {
      if (this.$element == "true") {
        this.$element.contentEditable = "false";      //How to edit this code here so i can rename the title of the Column?
      } else {
        this.$element == "true";
      }
    }
  };

托马斯·卡斯珀奇克（Tomasz Kasperczyk）

您要做的就是将事件侦听器添加到“编辑”按钮。处理程序应将标题替换为文本区域，或将contenteditable属性添加到title元素。这是一个例子：

// ...
var $columnTitleEdit = $("<button>")
    .addClass("btn-edit")
    .text("Edit")
    .on("click", function(){ //The event listener
        if ($(this).hasClass("btn-save")){ //If we're currently editing the title
            $columnTitle.attr("contenteditable", false);
            $(this).text("Edit").removeClass("btn-save");
        } else { //If we're not editing the title
            $columnTitle.attr("contenteditable", true).focus();
            $(this).text("Save").addClass("btn-save");
        }
    });

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。