Question

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

 }

Answer 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方式。

Answer 2

似乎工作正常。

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>

我用过这个，似乎没有问题。

Answer 3

我有一些指示可以让您更容易编写和改进现有代码。

首先，第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');
}

帮助div选择和取消选择jquery

3 个答案: