如何在无线电oncheck上获取特定div的源代码?

时间:2017-05-24 20:08:28

标签: javascript jquery html

我想得到一个div的源代码,所以如果一个div包含一些标签,我希望得到它们,因为它们是html格式并在文本字段中更新。

JsFiddle:https://jsfiddle.net/Lindow/g1sp1ms3/2/

HTML:

<form>

    <label class="tp_box_1">
        <input type="radio" name="selected_layout" class="selected_layout" value="layout_1">
        <div class="box_1">
            <h3>box_one</h3>
            <p>1</p>
        </div>
    </label>

    <br><hr><br>

    <label class="tp_box_2">
        <input type="radio" name="selected_layout" class="selected_layout" value="layout_2">
        <div class="box_2">
            <h3>box_two</h3>
            <p>2</p>
        </div>
    </label>

    <textarea id="mytextarea"></textarea>
    <input id="submit_form" type="button" value="Send">
</form>

JavaScript

$('input[type="radio"][name="selected_layout"]').change(function() {
     if(this.checked) {
         // get the specific div children of $this
         var selected_layout = $(this).find('.selected_layout');

         // get source code of what's inside the selected_layout
         /* example :
            <h3>box_two</h3>
            <p>2</p>
        and put it in someVariable.
         */

         // and put in into textarea (all this need to happens when a radio is changed with the source code of the checked div)
         var someVariable = ...
         $('textarea').val(someVariable);
     }
 });

我怎样才能做到这一点?如何在特定div中获取源代码?

2 个答案:

答案 0 :(得分:1)

首先,您不希望selected_layout等于:$(this).find('.selected_layout'),因为this已经指向该元素。你希望它指向它之后的下一个元素。

我认为这就是你要找的东西:

$('input[type="radio"][name="selected_layout"]').change(function() {
     if(this.checked) {
         // get the index within the set of radio buttons for the radio button that was clicked
         var idx = $("[type=radio][class=selected_layout]").index(this);
         
         // Get the div structure that corresponds to the same index
         var test = $("[class^='box_']")[idx];

         // Now, just make that the value of the textarea
         $('textarea').val(test.innerHTML);
     }
 });
textarea { width:100%; height:75px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>

    <label class="tp_box_1">
        <input type="radio" name="selected_layout" id="sl1" class="selected_layout" value="layout_1">
        <div class="box_1">
            <h3>box_one</h3>
            <p>1</p>
        </div>
    </label>
    <label class="tp_box_2">
        <input type="radio" name="selected_layout" id="sl2" class="selected_layout" value="layout_2">
        <div class="box_2">
            <h3>box_two</h3>
            <p>2</p>
        </div>
    </label>

    <textarea id="mytextarea"></textarea>
    <input id="submit_form" type="button" value="Send">
</form>

答案 1 :(得分:0)

使用以下内容创建boolean元素

  1. 里面的模板
  2. divclass用于识别
  3. 设置输入&#39;值到所需的模板类/ id,然后在输入更改时根据输入的值找到模板元素,并使用jQuery的id方法提取它的innerHTML。然后使用textarea元素上的.html()方法将此HTML作为textarea的新值。

    HTML:

    .html()

    jQuery的:

    <div id="template1" style="display:none;">
        <h1>Hi!</h1>
    </div>
    
    <input type="radio" onchange="findTemplate(event)" value="template1" />
    <textarea class="texta"></textarea>
    

    工作小提琴:https://jsfiddle.net/rsvvx6da/1/