Question

我认为我遗漏了一些东西，因为似乎没有办法通过CSS来区分best_in_place值和占位符（data-nil =“输入你的号码”）。我只想将占位符设置为与实际值不同，因此它看起来并不令人困惑。

我查看过这些事件，实际上可以在元素中添加一个类，但是当它们第一次显示在页面上时，没有可用于添加该类的事件。在这一点上，我将遍历每个$（'best_in_place'）并将nil值与span中的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');
    }
  });

Answer 1

感谢您的代码。我用

解决了这个问题

在我的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');
  }
 }

Answer 2

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

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

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

.none-yet {
  font-style: italic;
}

这对我来说是修订版df178520bf9ba405baee9528d5dbb630d6ff760c来自git：//github.com/bernat/best_in_place.git

样式占位符与best_in_place的值不同

2 个答案: