我可以干掉这些 jQuery 调用吗？

Question

有没有办法让这个 jQuery 干燥起来？

<script type="text/javascript">
  $('form input#search').watermark('search...');
</script>
<script type="text/javascript">
  $('form input#post_title').watermark('title');
</script>
<script type="text/javascript">
  $('form input#post_tag_list').watermark('tag (separate tags with a comma)');
</script>
<script type="text/javascript">
  $('form input#post_name').watermark('name (optional)');
</script>
<script type="text/javascript">
  $('form input#post_email').watermark('email (optional)');
</script>
<script type="text/javascript">
  $('form textarea#post_content').watermark('message');
</script>
<script type="text/javascript">
  $('form input#comment_commenter').watermark('name (optional)');
</script>
<script type="text/javascript">
  $('form input#comment_email').watermark('email (optional)');
</script>
<script type="text/javascript">
  $('form textarea#comment_body').watermark('reply');
</script>
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("abbr.timeago").timeago();
  });
</script>

看起来重复得非常厉害。

编辑： 我向所有表单添加了占位符元素。我的应用程序是 HTML5，所以没问题。我使用了这段代码：

<script type="text/javascript">
  jQuery(function(){
    jQuery("abbr.timeago").timeago();
    jQuery('form input, form textarea').each(
      function(){
        jThis = jQuery(this);
        jThis.watermark(jThis.attr('placeholder'));
      }
    }
  );
</script>

Chrome 使用或不使用 JS 渲染占位符，而 FF 3.6.8 和 Opera 10.61 显示空的输入/文本区域框。我应该使用 $ 而不是 jQuery(function(){... 吗？或者这很重要吗？

注意：我正在使用 jQuery 1.4.2

Answer 1

如果您将水印功能的参数存储在标题属性中，那么您可能会得到如下内容：

<form>
    <input type="text" id="search" title="search..." />
    <input type="text" id="post_title" title="title" />
    <input type="text" id="post_tag_list" title="tag (separate tags with a comma)" />
    <input type="text" id="post_name" title="name (optional)" />
    <input type="text" id="post_email" title="email (optional)" />
    <input type="text" id="post_content" title="message" />
    <input type="text" id="comment_commenter" title="name (optional)" />
    <input type="text" id="comment_email" title="email (optional)" />
    <input type="text" id="comment_body" title="reply" />
</form>

<script type="text/javascript">
    jQuery(function(){
        jQuery("abbr.timeago").timeago();
        jQuery('form input, form textarea').each(
            function(){
                jThis = jQuery(this);
                jThis.watermark(jThis.attr('title'));
            }
        }
    );
</script>

Answer 2

您可以将其存储在一个对象中，因为您拥有所有 ID，然后您可以执行以下操作：

watermarkText = {};
watermarkText.search = 'search...';
watermarkText.post_title = 'title';
watermarkText.post_tag_list = 'tag (separate tags with a comma)';
watermarkText.post_name = 'name (optional)';
watermarkText.post_email = 'email (optional)';
watermarkText.post_content = 'message';
watermarkText.comment_commenter = 'name (optional)';
watermarkText.comment_email = 'email (optional)';
watermarkText.comment_body = 'reply';

$('input').watermark(function() {return watermarkText[$(this).attr('id')] });
$('textarea').watermark(function() {return watermarkText[$(this).attr('id')]});