Question

我正在使用这个html结构，我希望内容中的内容＆＃34; CodeBlock＆＃34;在新窗口中打开：

<a href="javascript:popup();">Open</a>
<div class="CodeBlock">
line 1<br />
line 2<br />
line 3
</div>
<br /><br />
<a href="javascript:popup();">Open</a>
<div class="CodeBlock">
line 4<br />
line 5<br />
line 6
</div>

我试图用以下javascript捕获每个类：

function popup()
{
var generator=window.open('','name','height=400,width=500');

generator.document.write('<html><head><title>Popup</title>');
generator.document.write($(".CodeBlock").html());
generator.document.write('</body></html>');
generator.document.close();
}

这将打开第一个Codeblock，我现在尝试用第二个锚点打开第二个Codeblock：

generator.document.write($.next(".CodeBlock").html());

但.next（）似乎不起作用;两个弹出窗口都是空的。

我做错了什么，我怎样才能正常工作？

http://jsfiddle.net/Ax8Hz/23/

Answer 1

如何迭代这样的元素（使用jquery）：

function popup()
{
  var generator=window.open('','name','height=400,width=500');

  generator.document.write('<html><head><title>Popup</title>');
  $(".CodeBlock").each(function (index, element) {
    generator.document.write($(element).html());
  });
  generator.document.write('</body></html>');
  generator.document.close();
}

如评论中所述，这将显示所有div的内容。使用jquery可以获得下一个div的值，因为在给定的锚点（a）中这样（使用警告来显示它）：

$(document).ready(function() {
  $("a").each(function(index, element) {
    $(element).click(function(event) {
              alert($(element).next('div').html());
      });
    });
  });

这也使得锚点中的弹出功能变得多余。

Answer 2

将当前control通过函数作为参数传递，然后使用.next获取其next元素。你没有正确地做到这一点。你必须看到一些控制台错误，说 $.next不是一个功能

<a href="javascript:popup(this);">Open</a> <!--Pass "this" here-->
<div class="CodeBlock">
   line 1<br />
   line 2<br />
   line 3
</div>
<br /><br />
<a href="javascript:popup(this);">Open</a>
<div class="CodeBlock">
   line 4<br />
   line 5<br />
   line 6
</div>

JS 更新：

function popup(ctrl)
{
  var generator=window.open('','name','height=400,width=500');

  generator.document.write('<html><head><title>Popup</title>');
  generator.document.write($(ctrl).next(".CodeBlock").html());
  //use $(ctrl).next
  generator.document.write('</body></html>');
  generator.document.close();
}

Answer 3

问题是如何将当前对象（锚点）的引用传递给您的函数。正确的方法是：

<a href="#" onclick="popup(this)">Open</a>

所以，我的解决方案是：

function popup(obj)
{
  var myHtml = '<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Popup</title></head><body>' +
      $(obj).next('.CodeBlock').html() +
      '</body></html>';

  var generator = window.open('','name','height=400,width=500');
  generator.document.body.innerHTML = myHtml;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a href="#" onclick="popup(this)">Open</a>
<div class="CodeBlock">
    line 1<br />
    line 2<br />
    line 3
</div>
<br /><br />
<a href="#" onclick="popup(this)">Open</a>
<div class="CodeBlock">
    line 4<br />
    line 5<br />
    line 6
</div>

如何在新窗口中弹出几个部分的文本

3 个答案: