заменить текст в div, нажав кнопку

Question

заменить текст в div, нажав кнопку

0

У меня есть следующий проект: http://jsfiddle.net/TXQ9U/40/

То, что я хотел бы сделать, это то, что когда я (".button2"), меня заменяет другой контент (содержащий вопрос 2). Я знаком с функцией.html, поэтому я могу заменить содержимое следующим:

 $(".button2").on("click",function(){
 $("#inner").html('Dit is pagina 2');

 });

Но я не только хочу вставлять текст, но также хочу, чтобы это (см. Ниже) было скопировано, но затем с новыми значениями:

 <p> Question 1: what sport does Roger Federed play? </p>
<table width = "200">

    <tr>
        <td> <input type="radio" name="radio" class="a1" value="a1" /> Cricket </td>
        <td> <input type="radio" name="radio" class="a2" value="a1" /> Tennis </td>
        <td> <input type="radio" name="radio" class="a3" value="a1" /> Tennis </td>
        <td> <input type="radio" name="radio" class="a4" value="a1" /> Tennis </td>
    </tr>

</table>

Какие-либо предложения?

user181796 17 март 2014, в 11:10

Источник

1

Я бы порекомендовал изучить движки шаблонов JQuery, например, этот
musefan 17 март 2014, в 09:56
0

используйте $("#inner").append('Dit is pagina 2') ;
Mehmet Ince 17 март 2014, в 10:00

Теги:

jquery

html

2 ответа

0

Вы можете использовать клон

<table width = "200" id="myTable">
<tr>
    <td> <input type="radio" name="radio" class="a1" value="a1" /> Cricket </td>
    <td> <input type="radio" name="radio" class="a2" value="a1" /> Tennis </td>
    <td> <input type="radio" name="radio" class="a3" value="a1" /> Tennis </td>
    <td> <input type="radio" name="radio" class="a4" value="a1" /> Tennis </td>
</tr>
</table>

и ваши js:

$(".button2").on("click",function(){
    var clone = $('#myTable').clone();
    $("#inner div").empty().append(clone);
});

Остерегайтесь: вы должны отредактировать свой html следующим образом:

<div id="inner">
<div>
<p> Question 1: what sport does Roger Federed play? </p>
<table width = "200" id="myTable">

    <tr>
        <td> <input type="radio" name="radio" class="a1" value="a1" /> Cricket </td>
        <td> <input type="radio" name="radio" class="a2" value="a1" /> Tennis </td>
        <td> <input type="radio" name="radio" class="a3" value="a1" /> Tennis </td>
        <td> <input type="radio" name="radio" class="a4" value="a1" /> Tennis </td>
    </tr>

</table>
    </div>

Manuel Spigolon 17 март 2014, в 07:30

Ещё вопросы

Я бы порекомендовал изучить движки шаблонов JQuery, например, этот
используйте $("#inner").append('Dit is pagina 2') ;

Awlad Liton · Accepted Answer · 2014-03-17T07-37-00.000Z

попробуйте вот так:

$(".button2").on("click",function(){
    strText = $("#inner").clone(); // clone data
    $('p',strText).html(' Question 2: what sport does Roger Federed play2?');
    $('.a1',strText).text('new value1');//modify cloned data
    $('.a2',strText).text('new value2');
    $('.a3',strText).text('new value3');
    $('.a4',strText).text('new value4');
    $("#inner").html(strText); //set it to show

});

демонстрация