javascript - 使用 jQuery 更改组元素

Question

我有 3 个文本区域，其中默认文本为“写一些东西”。假设如果我单击其中之一，默认文本将消失并且该文本区域获得焦点。但是，如果我单击另一个文本区域，另一个文本区域的默认文本将消失，但第一个文本区域的默认文本将重新出现。我怎样才能做到这一点？同样的事情是，如果我单击第三个文本区域，我单击的文本区域的默认文本将消失，而另一个文本区域将重新出现。

编码:

<textarea class="t" id="tt3">Write something</textarea>
<textarea class="t" id="tt3">Write something</textarea>
<textarea class="t" id="tt3">Write something</textarea>

如何使用 jQuery 做到这一点？

Answer 1

首先，声明一个包含一些类的 css:

.t {
    font-family: Helvetica, Geneva, Arial, sans-serif;
}

.txt-selected {
    font-style: normal;
}

.txt-unselected {
    font-style: italic;
}

然后，在 JavaScript 中编写:

$(document).ready(function () {

    var defaultText = "write something";

    $(".t")
        .addClass("txt-unselected")
        .val(defaultText)
        .focus(function () {

            var $this = $(this);

            if($this.val() == defaultText)
            {
                $this.val("");
                $this.removeClass("txt-unselected");
                $this.addClass("txt-selected");
            }
        })
        .blur(function () {

            var $this = $(this);

            if($this.val() == "")
            {                
                $this.removeClass("txt-selected");
                $this.addClass("txt-unselected");
                $this.val(defaultText);
            }
        });
});

这应该可以完成工作。 ;)