Javascript 以图像为样式的交替项目符号注释_Javascript_Css_Contenteditable

Javascript 以图像为样式的交替项目符号注释

javascript css

Javascript 以图像为样式的交替项目符号注释,javascript,css,contenteditable,Javascript,Css,Contenteditable,我目前正在尝试使用一些图像来替换我的子弹注释的颜色。但是，我遇到了几个问题：如果我按backspace删除其中一个项目符号，则会出现contenteditable中的一条蓝线-尝试将我提供的小提琴链接中的所有内容退格，您将了解我的意思。通过将border设置为0px可能有一个简单的解决方法，但我不确定正确的语法主要的问题是，我希望它的书写方式是，当用户按下enter键时，下一个颜色项目符号或本例中的图像将显示出来。我不希望它一下子全部显示出来，但我不知道如何实现它。我假设涉及CSS类或Ja

我目前正在尝试使用一些图像来替换我的子弹注释的颜色。但是，我遇到了几个问题：

如果我按backspace删除其中一个项目符号，则会出现contenteditable中的一条蓝线-尝试将我提供的小提琴链接中的所有内容退格，您将了解我的意思。通过将border设置为0px可能有一个简单的解决方法，但我不确定正确的语法

主要的问题是，我希望它的书写方式是，当用户按下enter键时，下一个颜色项目符号或本例中的图像将显示出来。我不希望它一下子全部显示出来，但我不知道如何实现它。我假设涉及CSS类或Javascript——我对这些语言有点陌生

这是整个代码的一个片段，需要修复：

<body>
    <div contenteditable>
        <div id = "notes"
            <ul>
                <li style =  "list-style-image: url('http://i61.tinypic.com/2nb9jxs.png')">Click here to edit</li>
                <li style = "list-style-image: url('http://i58.tinypic.com/2m5xb1f.png')"> Click here </li>
                <li style = "list-style-image: url('http://i60.tinypic.com/2qb5342.png')"> Click here </li>
            </ul>
            <style>
                #notes { 
                    position: absolute;
            </style>
        </div>
    </div
</body

下面是fiddle.js链接：如果你也能给出一个解决方案，那就太好了。谢谢大家!

要修复第一部分，请添加大纲：0；添加到已编辑内容以符合OP要求的元素

继续移动您的内容将大纲：0添加到您的 HTML:

<div>
    <div id="notes">       
        <ul contenteditable>
            <li style="list-style-image: url('http://i61.tinypic.com/2nb9jxs.png')">Click here to edit</li>
            <li style="list-style-image: url('http://i58.tinypic.com/2m5xb1f.png')"> Click here </li>
            <li style="list-style-image: url('http://i60.tinypic.com/2qb5342.png')"> Click here </li>
        </ul>
    </div>
</div>

编辑

要替换颜色，请使用以下代码：

HTML

为什么你的标签挂在中间呢？应该位于抱歉，几天前我学习了HTML以及其他内容。我将在实际代码中更改它。谢谢你的提示！抱歉有点粗鲁，我犯的错误太多了。不要忘了关闭每个标签以及所有内容，否则会导致意外错误。一个干净有效的HTML标记可以避免您在搜索本不应该存在的错误时浪费时间。就您的解决方案而言，我不能在每个项目中按enter键超过一次。但我不太明白为什么它会限制喵喵好吧，我明白你想做什么。尝试从每个中删除contenteditable属性，并将其添加到。谢谢我会把你的事情解决的。关于我的第二个问题，你能给我一些建议吗。我想我没有刷新页面。非常感谢。

#notes { 
    position: absolute;
}
[contenteditable] {
    outline: none;
}

<div>
    <div id="notes">       
        <ul contenteditable>
            <li>Click here to edit</li>
            <li>Click here </li>
            <li>Click here </li>
        </ul>
    </div>
</div>

#notes { 
    position: absolute;
}
[contenteditable] {
    outline: none;
}
li {
    list-style-image: url('http://i61.tinypic.com/2nb9jxs.png');
}
li:nth-child(3n+1) {
    list-style-image: url('http://i61.tinypic.com/2m5xb1f.png');
}
li:nth-child(3n+2) {
    list-style-image: url('http://i61.tinypic.com/2qb5342.png');
}