javascript - 如何用JS改变文本

Question

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

完整代码click here .

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

Answer 1

您所要做的就是向编辑按钮添加事件监听器。处理程序应该用文本区域替换标题，或者添加 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");
        }
    });