Question

我想得到一个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中获取源代码？

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

Answer 2

使用以下内容创建boolean元素

里面的模板
div或class用于识别

设置输入＆＃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/

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

2 个答案: