帮助div选择和取消选择jquery

时间:2010-09-05 20:00:01

标签: jquery

我试图取消选择之前点击的其他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);

 } 

3 个答案:

答案 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');
}