我试图取消选择之前点击的其他div。我已经将旧的div id存储在一个隐藏的输入中,你可以在下面看到我已经添加了一个警告,所以显示最后一个div选择它工作正常但是当我尝试更改css中的div文本颜色时,整个脚本停止工作。
function edit_addon(div_id) {
$("#"+div_id).attr('contentEditable', true);
$("#"+div_id).html()
$("#"+div_id).css('color','#F00');
$("#"+div_id).css('cursor','Text');
var old_div = $("input#selected_div").val();
alert(old_div);
$("#"+old_div).css('color','#000');
$("input#selected_div").val(div_id);
}
答案 0 :(得分:1)
你确定alert
工作正常吗?它不应该在第一次传递时起作用,因为在第一次调用selected_div
之前edit_addon
没有值。
将代码修改为:
function edit_addon (div_id) {
$("#"+div_id).attr ('contentEditable', true) //-- Use no semicolon here
.css ('color','#F00')
.css ('cursor','Text')
;
var old_div = $("input#selected_div").val();
alert(old_div);
if (old_div)
$("#"+old_div).css('color','#000');
$("#selected_div").val(div_id);
}
。
您可以 see it in action at jsfiddle. 如果您这样做,请注意通过将函数更改为事件处理程序(如jsfiddle所示),您可以简化HTML并将函数绑定到progressive-enhancement方式。
答案 1 :(得分:0)
似乎工作正常。
function edit_addon(div_id) {
$("#"+div_id).attr('contentEditable', true)
.css('color','#F00');
.css('cursor','Text');
var old_div = $("input#selected_div").val();
alert(old_div);
$("#"+div_id).css('color','#000');
$("input#selected_div").val(div_id);
}
<div id="hello" onclick="edit_addon('hello')">HelloWorld!</div>
<div id="bye" onclick="edit_addon('bye')">Bye!!</div>
<form><input type="hidden" id="selected_div" /></form>
我用过这个,似乎没有问题。
答案 2 :(得分:0)
我有一些指示可以让您更容易编写和改进现有代码。
首先,第1-4行继续选择你想要的元素 - 这意味着更多的DOM遍历,这是更慢的。所有jQuery方法都返回元素的实例,因此您可以像这样“链接”您的方法调用:
$("#"+div_id).attr('contentEditable', true)
.css('color','#F00')
.css('cursor','Text');
注意:此处的换行符无关紧要。
其次,表单#myId
的选择器通常比表单tagnam#myId
的选择器效果更好,原因是第一个将直接映射到document.getElementById
,而第二个将使用document.getElementsByTagName
然后循环遍历它们以找到具有id的那个。
所以,回到你原来的问题。我的建议是简单地将CSS类添加到您选择的元素,而不是通过调用.css()
来设置内联样式。然后,无需像您建议的那样将前一个元素存储在隐藏字段中。
相反,您只需选择包含所选类的div
标记即可。
这里的关键是你以前的元素(如果有的话)总是会有你要添加的CSS类。
以下是我所得到的一个例子:
function edit_addon(div_id)
{
//step 1 - find your old element and clear the CSS
$('div.selected').removeClass('selected');
//step 2 - now, modify the div_id element
$("#"+div_id).attr('contentEditable', true)
.addClass('selected');
}