将文本区域新行文本附加为锚文本
Append textarea new line text as anchor text
编织=http://kodeweave.sourceforge.net/editor/#4c11169c009d3096f896798b8b28e088
我有一个textarea.libraries
,它由以下值组成(这取决于用户输入)。
https://necolas.github.io/normalize.css/4.1.1/normalize.css
https://leaverou.github.io/prefixfree/prefixfree.js
http://ajax.googleapis.com/ajax/libs/mootools/1/mootools-yui-compressed.js
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js
我知道我可以通过使用一个简单的for循环来检测文本区域的行数。。。
for (i = 0; i <= $(".libraries").val().split("'n").length - 1; i += 1) {
// Every new line appends an anchor
$(".assets").append('<a class="block" href="javascript:void(0)">'+ i +'</a>')
}
在这种情况下,当锚被附加时,我如何抓取第一行作为规范化链接作为第一个锚文本,第二个锚文本没有前缀,等等?
如果你仍然感到困惑。我试着取这个值:
https://necolas.github.io/normalize.css/4.1.1/normalize.css
https://leaverou.github.io/prefixfree/prefixfree.js
http://ajax.googleapis.com/ajax/libs/mootools/1/mootools-yui-compressed.js
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js
把它变成。。。
<a data-action="call1">https://necolas.github.io/normalize.css/4.1.1/normalize.css</a>
<a data-action="call2">https://leaverou.github.io/prefixfree/prefixfree.js</a>
<a data-action="call3">http://ajax.googleapis.com/ajax/libs/mootools/1/mootools-yui-compressed.js</a>
<a data-action="call4">https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js</a>
var download_to_textbox = function (url, el) {
return $.get(url, null, function (data) {
el.val(data)
}, "text")
};
// Get library index upon anchor click
var libraryIndex = function() {
$(".assets a").on("click", function() {
alert($(this).index() + 1)
})
};
$(".libraries").on("keyup change", function() {
$(".assets").empty()
for (i = 1; i <= $(".libraries").val().split("'n").length; i += 1) {
$(".assets").append('<a class="block" href="javascript:void(0)">'+ i +'</a>')
}
setTimeout(function() {
libraryIndex()
}, 300)
}).trigger("change")
.wrapper, .assets, .bottom {
position: absolute;
}
.wrapper {
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 12px;
}
.assets textarea {
width: 98%;
height: 58px;
}
.assets {
top: 0;
bottom: 70px;
overflow: auto;
}
.assets a {
font-size: 17px;
padding: 7px;
}
.bottom {
bottom: 0;
}
.bottom textarea {
height: 60px;
padding: 0;
padding-top: 3px;
border: 0;
border-top: 1px solid #666;
}
/* variable classe */
.block {
display: block;
}
.fill {
width: 100%;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="assets fill">
<!-- <textarea class="example"></textarea> -->
</div>
<div class="bottom fill">
<textarea class="libraries fill">https://necolas.github.io/normalize.css/4.1.1/normalize.css
https://leaverou.github.io/prefixfree/prefixfree.js
http://ajax.googleapis.com/ajax/libs/mootools/1/mootools-yui-compressed.js
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js</textarea>
</div>
</div>
我想你需要这个,但正如我在评论中所说的,这很难理解。然而,这里是修改后的片段:
已编辑
我要编辑一个版本,因为你对你的预期结果有新的评论。给你:
var download_to_textbox = function (url, el) {
return $.get(url, null, function (data) {
el.val(data)
}, "text")
};
// Get library index upon anchor click
var libraryIndex = function() {
$(".assets a").on("click", function() {
alert($(this).index() + 1)
})
};
$(".libraries").on("keyup change", function() {
$(".assets").empty()
var lines = $(".libraries").val().split("'n");
for (i = 0; i < lines.length; i ++) {
$(".assets").append('<a data-action="call'+(i+1)+'">'+ lines[i] +'</a>')
}
setTimeout(function() {
libraryIndex()
}, 300)
}).trigger("change")
.wrapper, .assets, .bottom {
position: absolute;
}
.wrapper {
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 12px;
}
.assets textarea {
width: 98%;
height: 58px;
}
.assets {
top: 0;
bottom: 70px;
overflow: auto;
}
.assets a {
font-size: 17px;
padding: 7px;
display:block;
}
.bottom {
bottom: 0;
}
.bottom textarea {
height: 60px;
padding: 0;
padding-top: 3px;
border: 0;
border-top: 1px solid #666;
}
/* variable classe */
.block {
display: block;
}
.fill {
width: 100%;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="assets fill">
<!-- <textarea class="example"></textarea> -->
</div>
<div class="bottom fill">
<textarea class="libraries fill">https://necolas.github.io/normalize.css/4.1.1/normalize.css
https://leaverou.github.io/prefixfree/prefixfree.js
http://ajax.googleapis.com/ajax/libs/mootools/1/mootools-yui-compressed.js
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js</textarea>
</div>
</div>
相关文章:
- 拆分文本以每隔n个字符添加一行新行,并注意空格
- JavaScript-如果以前不存在文本,如何从文本区域删除新行
- 使用删除文本创建新行
- 如何在Google Geochart图表的工具提示文本中添加新行
- JavaScript 文本区域值,带有数据库中的新行
- 按钮文本中的新行
- 使用Javascript在文本区域中添加新行
- 崇高的文本新行失去缩进
- 如何使文本区域不开始新行
- 用新行设置文本区域的值
- 使用javascript(IE bug?)在文本区域插入新行
- 为什么文本在 li 标签中开始一个新行
- 将文本区域中的文本按新行(包括空行)拆分为 javascript 数组
- 文本区域中的新行字符会增加 C# 中的文本长度
- 如何确定 HTML 元素文本中“新行”的位置
- 可在新行上调整大小的 DIV 制作文本框
- MVC - 处理新行的未终止字符串文本
- 如何使用新行调整文本框的大小
- 避免在新行后创建文本节点
- 通过 GET 传递带有新行的文本字符串会破坏我的重定向