在jquery中选择和取消选择div的帮助_Jquery

在jquery中选择和取消选择div的帮助

jquery

在jquery中选择和取消选择div的帮助,jquery,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。我已经将旧的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);

 }

它似乎工作得很好

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>

函数编辑插件（div\u id）{
$（“#”+div_id）.attr（'contentEditable'，true）
.css（'color'，'#F00'）；
.css（'cursor'，'Text'）；
var old_div=$（“input#selected_div”）.val（）；
警觉（旧分区）；
$（“#”+div_id）.css（'color'，'#000'）；
$（“输入选定分区”）.val（分区id）；
}
地狱世界！
再见！！

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

它似乎很好用

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>

函数编辑插件（div\u id）{
$（“#”+div_id）.attr（'contentEditable'，true）
.css（'color'，'#F00'）；
.css（'cursor'，'Text'）；
var old_div=$（“input#selected_div”）.val（）；
警觉（旧分区）；
$（“#”+div_id）.css（'color'，'#000'）；
$（“输入选定分区”）.val（分区id）；
}
地狱世界！
再见！！

我使用了这个，似乎没有什么问题。

我有一些建议，可以让它更容易编写并改进现有代码

首先，第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_id).attr('contentEditable', true)
    .css('color','#F00')
    .css('cursor','Text');