Question

我正在使用锚来捕获预标记内的代码。我的HTML结构是这样的：

<a href="javascript:fnSelect('id123');>[Select Code]</a>
<pre class="CodeBlock linenums" id="id123"><!-- code --> </pre>

为了将id添加到pre标签和锚点，我使用以下代码：

$('pre').each(function(){
    var id;
    if ($(this).attr('id') == undefined){
      id = 'id'+Math.floor((Math.random() * 99999999) + 1);
      $(this).attr('id',id);
      $(this).prev('a').attr('id',id);
    }
});

这为pre标签和锚创建了相同的id。但问题是，它生成了这个HTML：

<a href="javascript:fnSelect('id');" id="id38554807">[Select Code]</a>
<pre class="CodeBlock linenums" id="id38554807">

它应该是这样的：

<a href="javascript:fnSelect('id38554807');>[Select Code]</a>

我怎样才能做到这一点？

Answer 1

您只是设置ID，而不是更新href属性

$('pre').each(function(){
        var id;
        if ($(this).attr('id') == undefined){
          id = 'id'+Math.floor((Math.random() * 99999999) + 1);
          $(this).attr('id',id);
          $(this).prev('a').attr('href',"javascript:fnSelect('" + id + "')");
        }
     });

或者更好地传递你的fnSelect方法pre元素本身：

$('pre').each(function() {
  $(this).prev('a').on('click', function(ev) {
    ev.preventDefault();
    fnSelect(this);
  });
});

Answer 2

让我们以jQuery的方式做到这一点。不要给锚点ID，因为它们不需要它们。他们只需要一个数据属性来保存相应的pre标签。然后在锚点击事件上设置一个事件处理程序：

$('pre').each(function() {
    var id;
    if ($(this).attr('id') == undefined) {
        id = 'id' + Math.floor((Math.random() * 99999999) + 1);
        $(this).attr('id', id);
        $(this).prev('a').attr('data-id', id);
    }
});

$('a[data-id]').click(function() {
    alert($(this).next().attr('id'))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#">[Select Code]</a>
<pre class="CodeBlock linenums"></pre>

<a href="#">[Select Code]</a>
<pre class="CodeBlock linenums"></pre>

<a href="#">[Select Code]</a>
<pre class="CodeBlock linenums"></pre>

<a href="#">[Select Code]</a>
<pre class="CodeBlock linenums"></pre>

如何将ID放入fnSelect（）？

2 个答案: