附加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循环来检测文本区域的行数.

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>

​