附加 textarea 新行文本作為錨文本

Question

編織 = 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 循環來檢測 textarea 的行數...

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>

Answer 1

我認為你需要這個，但正如我在評論中所說的那樣很難理解。 但是，這里是修改后的代碼段：

已編輯

由於您對預期結果的新評論，我正在制作一個版本。 這個給你：

 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>