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>')
}

在这种情况下，当附加锚点时，我怎么能抓住第一行作为第一个锚定文本的normalize链接，第二个是无前缀的，依此类推？

如果你仍然感到困惑。我正试图取这个值：

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>

将textarea新行文本附加为锚文本

1 个答案:

被修改