我们在代码中有一个问题,在我的代码函数中有主div区域,在我们更改或选择无线电时我们有两个单选按钮有两个部分,一个用于textarea,一个用于文件加载按钮,当我们点击它们显示和隐藏。
请找到我的代码链接: - https://jsfiddle.net/bharat_negi/bw6uw9ah/
jquery代码: -
function changeCheck(){
$('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
var changeOption = $(this).closest('.radioArea').attr("data-id");
console.log(changeOption);
if (this.value == 'Image') {
$('.textArea').show();
$('.browseArea').hide();
}
else if (this.value == 'Text') {
$('.textArea').hide();
$('.browseArea').show();
}
});
}
答案 0 :(得分:2)
试试这个。你需要从closest
父目标定位textarea的元素,否则它的目标是所有texarea元素。这就是为什么它隐藏所有textarea并选择按钮。并且还改变了匹配if
使用Text
其他Image
changeCheck();
function changeCheck() {
$('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
var changeOption = $(this).closest('.radioArea').attr("data-id");
console.log(changeOption);
if (this.value == 'Text') {
$(this).closest('.questionBlock').find('.textArea').show();
$(this).closest('.questionBlock').find('.browseArea').hide();
} else if (this.value == 'Image') {
$(this).closest('.questionBlock').find('.textArea').hide();
$(this).closest('.questionBlock').find('.browseArea').show();
}
});
}

.questionBlock {
float: left;
margin: 0;
padding: 10px 0;
width: 100%;
display: flex;
}
.questionBlock .alloption {
float: left;
margin: 0;
padding: 0;
width: 100%;
clear: both;
}
.questionBlock .text {
display: inline-block;
margin: 0;
padding: 0;
width: 10%;
}
.questionBlock .radioArea {
display: inline-block;
margin: 0;
padding: 0;
width: 20%;
}
.questionBlock .textArea {
display: inline-block;
margin: 0;
padding: 0;
width: 70%;
}
.questionBlock .browseArea {
display: inline-block;
margin: 0;
padding: 0;
width: 70%;
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionBlock">
<div class="text">Option 1</div>
<div class="radioArea" data-id="upload1">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
<div class="questionBlock">
<div class="text">Option 2</div>
<div class="radioArea" data-id="upload2">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
<div class="questionBlock">
<div class="text">Option 3</div>
<div class="radioArea" data-id="upload3">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
&#13;
答案 1 :(得分:2)
你可以在这里找到工作的jsfiddle而无需对代码进行太多更改
function changeCheck(){
$('.questionBlock').on('change', 'input[type=radio]', function() {
if (this.value == 'Image') {
console.log($(this).parent())
$(this).parents('.questionBlock').find('.textArea').hide();
$(this).parents('.questionBlock').find('.browseArea').show();
}
else if (this.value == 'Text') {
$(this).parents('.questionBlock').find('.textArea').show();
$(this).parents('.questionBlock').find('.browseArea').hide();
}
});
}
答案 2 :(得分:1)
这是更新的jquery函数:
changeCheck();
function changeCheck(){
$('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
var changeOption = $(this).closest('.radioArea').attr("data-id");
console.log(changeOption);
if (this.value == 'Image') {
$(this).closest('.questionBlock').find('.textArea').show();
$(this).closest('.questionBlock').find('.browseArea').hide();
}
else if (this.value == 'Text') {
$(this).closest('.questionBlock').find('.textArea').hide();
$(this).closest('.questionBlock').find('.browseArea').show();
}
});
}
我使用$(this).closest('.questionBlock')
来获取相关的textarea和fileupload元素。
答案 3 :(得分:0)
这里$(this).parent().closest('div')
将获得'radioArea'div然后你调用.next()
它将在'radioArea'之后检索下一个div,即'textArea'div,这样你就可以执行show或者隐藏与您单击的项目对应的功能。
$(this).parent().closest('div').next().next().show();//show browseArea div
$(this).parent().closest('div').next().hide(); //hide textArea div
changeCheck();
function changeCheck(){
$('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
var changeOption = $(this).closest('.radioArea').attr("data-id");
console.log(changeOption);
if (this.value == 'Image') {
$(this).parent().closest('div').next().next().show();//show browseArea div
$(this).parent().closest('div').next().hide(); //hide textArea div
}
else if (this.value == 'Text') {
$(this).parent().closest('div').next().next().hide(); //hide browseArea div
$(this).parent().closest('div').next().show(); //show textArea div
}
});
}
.questionBlock{ float: left; margin: 0; padding: 10px 0; width: 100%; display: flex;}
.questionBlock .alloption{float: left; margin: 0; padding: 0; width: 100%; clear: both;}
.questionBlock .text{ display: inline-block; margin: 0; padding: 0; width: 10%;}
.questionBlock .radioArea{ display: inline-block; margin: 0; padding: 0; width: 20%;}
.questionBlock .textArea{ display: inline-block; margin: 0; padding: 0; width: 70%;}
.questionBlock .browseArea{ display: inline-block; margin: 0; padding: 0; width: 70%; display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionBlock">
<div class="text">Option 1</div>
<div class="radioArea" data-id="upload1">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
<div class="questionBlock">
<div class="text">Option 2</div>
<div class="radioArea" data-id="upload2">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
<div class="questionBlock">
<div class="text">Option 3</div>
<div class="radioArea" data-id="upload3">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>