Question

当我选择答案"no"时，文本框会根据具体情况显示。如果我改变主意，我会选择"yes"，文本框会消失。但是，如果我再次更改为"no"文本框，则不会再次出现...

我犯错误的地方？

var numAdd = 1;
var add = function() {
    if (numAdd >= 2) return;
    $('#skoki').append('<div><input type="text" name="2" style="width: 100x; height: 300px;" /></div>');
     numAdd++;
};

function hideByClass(className) {
   $("."+className).remove();
};

Answer 1

原因： - 您要删除hideByClass()函数中的整个div，因此第二次add()无效，因为{{1}那么是未定义的。

如下所示： -

＆＃13;

$('#skoki')

＆＃13;

function add() {
    $('.blueBox').html('<div><input type="text" name="2" style="width: 100x; height: 300px;" /></div>');
};

function hideByClass(className) {
   $("."+className).html('');
};

＆＃13;

Answer 2

您正在删除父元素而不仅仅是输入本身。你应该做的是要么删除孩子，要么只是清除HTML。您还有一个条件，不允许再次添加输入。因此，您需要将其重置为1才能将输入重新添加回来。

var numAdd = 1;
var add = function() {
    if (numAdd >= 2) return;
    $('#skoki').append('<div><input type="text" name="2" style="width: 100x; height: 300px;" /></div>');
     numAdd++;
};

function hideByClass(className) {
   $("."+className).html('');
   numAdd = 1;
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Do you like stack Overflow? If "No" tell me why.<br>
<input type="radio" name="a" onclick="hideByClass('blueBox');"><label>Yes</label>
<input type="radio" name="a" onclick="add()"><label>No</label>
<div id="skoki" class="blueBox">
    </div>

Answer 3

您也可以通过以下代码

来完成

＆＃13;

$(document).on('click', 'input.inp-rad', function(){
		if($(this).attr('data-val') == 'No'){
				$('#skoki').html('<div><input type="text" name="2" style="width: 100x; height: 300px;" /></div>');
    }else{
    		$('#skoki').html('');
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Do you like stack Overflow? If "No" tell me why.<br>
<input type="radio" name="a" class="inp-rad" data-val="Yes"><label>Yes</label>
<input type="radio" name="a" class="inp-rad" data-val="No"><label>No</label>
<div id="skoki" class="blueBox"></div>

＆＃13;

Answer 4

＆＃13;

var numAdd = 1;
var add = function() {
    $('#skoki').append('<div class="blueBox"><input type="text" name="2" style="width: 100x; height: 300px;" /></div>');
  
};

function hideByClass(className) {
   $("."+className).remove();
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Do you like stack Overflow? If "No" tell me why.<br>
<input type="radio" name="a" onclick="hideByClass('blueBox');"><label>Yes</label>
<input type="radio" name="a" onclick="add()"><label>No</label>
<div id="skoki">
    </div>

＆＃13;

Answer 5

我已将您的代码更改为以下内容并且可以正常工作。

Do you like stack Overflow? If "No" tell me why.<br>
<input type="radio" name="a" onclick="hideByClass('input');"><label>Yes</label>
<input type="radio" name="a" onclick="openByClass('blueBox')"><label>No</label>
<div id="skoki" class="blueBox">
    </div>

您的Javascript

function hideByClass(className) {
   $("."+className).remove();
};

function openByClass(className){
    $("."+className).append('<div class="input"><input type="text" name="2" style="width: 300px; height: 35px;" /></div>');
};

删除并通过无线电添加div

5 个答案: