как всплывать несколько частей текста в новом окне

я имею этот HTML структуру, и я хочу содержимое внутри класса «кодоблок», чтобы открыть в новом окне:как всплывать несколько частей текста в новом окне

<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(); 
}

Это открывает первый кодоблок и я пытаюсь теперь открыть второй кодоблок со вторым якорем:

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

Но .next(), похоже, не работает; оба всплывающих окна пусты.

Что я делаю неправильно и как я могу заставить эту работу работать правильно?

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

источник

2015-12-23 Anonymous

я не добавить библиотеку в этом коде выше, но в скрипку, он будет загружен и его не работает ни –

Проблема заключается в том, как передать ссылку на текущий объект (анкер) к вашей функции. Правильный путь:

 
<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>

источник

2015-12-23 14:24:04 gaetanoM

Awesome! Это то, что я искал. Первый метод с (0) и (1) также отлично работает, но якорь динамически генерируется как часть строки php, поэтому я искал способ без (0), (1), (2) и т. Д. .. это действительно отлично работает! Спасибо за решение –

Как насчет переборе элементов, как это (с помощью 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(); 
}

Как уже упоминалось в комментариях, это покажет содержание всех дивы. С помощью JQuery можно получить значение следующего DIV, ибо в данном якорем (а), как это (используя предупреждение, чтобы показать):

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

Это также делает функцию всплывающий в якорем избыточном.

источник

2015-12-23 14:00:56 torbenl

Я попробовал это в новой скрипке, но, к сожалению, это тоже не решение. http://jsfiddle.net/Ax8Hz/25/ –

Я только что обновил код - добавил $() вокруг элемента, пожалуйста попробуй еще раз. – torbenl

Он также работает с element.innerHTML вместо $ (element) .html(), если вы хотите избежать обертывания элемента в объекте jquery. http://jsfiddle.net/Ax8Hz/26/ – torbenl

Передайте свой текущий 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(); 
}

источник

2015-12-23 14:03:45

Я пробовал этот код выше, но оба всплывающих окна дают мне контент: ** undefined ** –

как всплывать несколько частей текста в новом окне

ответ

Смежные вопросы