样式占位符与 best_in_place 的值不同

Posted 2023-02-15

【中文标题】样式占位符与 best_in_place 的值不同

【英文标题】：Style placeholder differently from value with best_in_place

【发布时间】：2012-07-26 16:21:55

【问题描述】：

我认为我遗漏了一些东西，因为似乎无法通过 CSS 区分 best_in_place 值和占位符（data-nil="enter your number"）。我只是想将占位符的样式设置为与实际值不同，这样它看起来就不会令人困惑。

我已经查看了事件，实际上可以为元素添加一个类，但是当它们第一次显示在页面上时，没有可用于添加该类的事件。在这一点上，我将遍历每个 $('best_in_place') 并将 nil 值与跨度中的 html 值进行比较，但是在我这样做之前，我只是想知道我是否错过了一些东西。

那么有没有办法区分一个值是用 best_in_place 设置的？

如果代码让您更好地理解：这可行，只需将类添加或删除到 best_in_place，但它只会在用户编辑字段时设置，而不是在初始页面加载时设置。

$('.best_in_place').bind('best_in_place:update', function(evt)
    if($(this).data('nil') == $(this).html())
      $(this).removeClass('has_value');
    else
      $(this).addClass('has_value');
    
  );

【参考方案1】：

一个非常简单的解决方案是在您的 :nil 值中包含标记，如下所示：

= best_in_place @user, :email, nil: '<span class="none-yet">None yet!</span>'

然后你可以有这样的 CSS 规则：

.none-yet 
  font-style: italic;

这对我有用，来自 git://github.com/bernat/best_in_place.git 的修订版 df178520bf9ba405baee9528d5dbb630d6ff760c

【参考方案2】：

感谢您提供的代码。我解决了这个问题

在我的 example.js.erb 中

$('.top-column .best_in_place').each(function() 
  var element = $(this);

  if(element.data('nil') != element.text()) 
    updateBestInPlace($(this));
  
);

在example.js中

$(document).ready(function()
  $('.top-column .best_in_place').live("ajax:success", function()
  updateBestInPlace($(this));
  );
);

function updateBestInPlace(element)
  if(element.data('nil') == element.html() || element.html() == "")
  element.removeClass('has_value');
  else
   element.addClass('has_value');