Javascript 在主干视图中使用jQuery设置可编辑内容的样式

我正在创建一个基础应用程序来学习Backbone.js。在我的代码中，我有以下模板

<script type="text/template" id="userTemplate">
  <span class="nome"><%= nome %></span>
  <span class="sobrenome"><%= sobrenome %></span>
  <a href="#" class="editar">Editar</a>
  <a href="#" class="remover">Remover</a>
</script>

我一直在尝试使用jQuery的

css（）

为

contenteditable

设计样式，但由于某些原因，css不会应用于内容

this.$('.sobrenome').attr('contenteditable', true).css(style).focus();

---

怎么了？在我看来，一切正常。

问题似乎在于这一部分：

this.$('.sobrenome')

我不相信您可以将本机

this

与jQuery选择器结合使用，您需要将

this

转换为jQuery可以使用的内容，因此请尝试以下操作

$(this).$('.sobrenome')

---

然而，即使做出这样的更改也没有意义，因为您没有在JavaScript中连接

。像这样链接选择器不会有什么作用。

这是你的目标吗？我将样式放在一个类中，并删除了不必要的（？）

this

$（'.sobrenome'）.attr（'contenteditable'，true.focus（）
.sobrenome{
颜色：绿色；
高度：70像素；
边框：2倍纯绿；
}

asasf
var样式={
颜色：“绿色”，
高度：'70px'，
边框：“2件纯绿”
};
$（'.sobrenome'）。每个（函数（）{
var_state=$（this.attr（'data-contenteditable'）；
如果（_state=='true'）{
$（this.css（style.focus（））；
}
});

无样式元素
Sstyled元素
因为您使用的是主干，所以我想我应该提供一个简单的主干视图，它可以切换
contenteditable
属性，并默认使用CSS进行样式化

避免在JavaScript中应用CSS，只要可能，最好切换类，以保持样式和逻辑完全分离

要仅在
contenteditable
为true时设置样式，可以使用以下选择器

[contenteditable="true"] { 
    /* css */
}

为了示例，我简化了代码。我添加了一个简单的
blur
处理程序，以便在用户单击元素外部时删除
contenteditable


var ContentEditableView=Backbone.View.extend({
模板：35;.template（$（'#userTemplate'）.html（）），
活动：{
“单击.编辑”：“OneEdit”，
“blur.content”：“OneDittone”
},
render:function（）{
this.$el.html（this.template({
内容：“测试”，
诺姆：“测试诺姆”，
}));
//缓存jQuery对象比每次查询DOM要好。
this.$content=this.$（'.content'）；
归还这个；
},
onEdit：函数（e）{
e、 预防默认值（）；
这是.content.attr（'contenteditable'，true）.focus（）；
},
onEditDone:function（）{
这是.content.attr（'contenteditable'，false）；
}
});
var view=新的ContentEditableView({
el:$（“#应用程序”）
});
view.render（）
/*将CSS排除在JS之外*/
[contenteditable=“true”]{
颜色：绿色；
高度：70像素；
边框：2倍纯绿；
}

在您的
$（'.sobrenome'）
仍然不起作用之前，删除
此
。我从未在脚本标记中看到HTML，因此，不确定这是否合法或与您的模板/主干有关…@AmericanSlime如果
类型
不是
文本/javascript
并且它不会显示在页面上，您可以在脚本标记之间添加任何内容。然后你可以用JavaScript恢复内容。@Emile Bergeron啊不知道！也没有看到主干标签。我的宝贝，我试着移除这个。我还尝试使用$（this）。$（'sobrenome'）。两者都没有成功。@adahox_u您将不得不显示更多的代码，例如HTML，因为不清楚您试图针对的是什么。我不知道你是在尝试组合选择器还是什么。
$（选择器）
是一个主干视图函数，它是
的别名。$el.find（选择器）
。这是一个很棒的答案。我在试着做些迪纳米克舞。但您展示了一种示例方法。谢谢@Emile
[contenteditable="true"] { 
    /* css */
}