Question

df.rdd.saveAsTextFile

如果选择“One”（灰色）单选按钮，我需要显示DIV id“one”并在div中的所有输入字段中添加类名（必需）。同样的方法，如果我更改为粉红色单选按钮删除以前的div类名称，并使用Jquery添加到DIV id两。

请帮助我！

Answer 1

您可以通过div将广播控制与index相关联。然后，您可以根据需要添加/删除类。试试这个：

$('input[type="radio"]').change(function() {
    $('input[type="text"]').removeClass('required');
    $('div').not(':first').hide();
    $('div').eq($(this).index() + 1).show().find('input').addClass('required');
});

请注意，您可以通过在HTML中使用类来简化此逻辑：

<div>
    One : <input type="radio" name="typeof" id="typeof1-grey" class="radio" value="grey" />
    Two : <input type="radio" name="typeof" id="typeof2-pink" class="radio" value="pink" />
    Three : <input type="radio" name="typeof" id="typeof3-green" class="radio" value="green" />   
<div>
<div id="one" class="optional-div">
    ABC : <input type="text" name="abc" value="" class="text-input" />
    PQR : <input type="text" name="pqr" value="" class="text-input" />
</div>
<div id="two" class="optional-div">
    XYZ : <input type="text" name="xyz" value="" class="text-input" />
</div>
<div id="three" class="optional-div">
    Full Name: <input type="text" name="fname" value="" class="text-input" />
</div>

$('.radio').change(function() {
    $('.text-input').removeClass('required');
    $('.optional-div').hide().eq($(this).index()).show().find('.text-input').addClass('required');
});

Example fiddle

Answer 2

这是我的解决方案，我为每个div元素添加了一个class sub，当点击radiobutton时，它必须显示/隐藏。

＆＃13;

var divs = ['#one', '#two', '#three'];
$('input[type="radio"]').change(function() {
    var current = $(divs[$(this).index()]);
    $('.sub').hide();
    $('input').removeClass('required');
    current.show();
    current.children('input').addClass('required');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    One : <input type="radio" name="typeof" id="typeof1-grey" value="grey" />
    Two : <input type="radio" name="typeof" id="typeof2-pink" value="pink" />
    Three : <input type="radio" name="typeof" id="typeof3-green" value="green" />   
<div>
<div id="one" class="sub" style="display:none;">
    ABC : <input type="text" name="abc" value="" />
    PQR : <input type="text" name="pqr" value="" />
</div>
<div id="two" class="sub" style="display:none;">
    XYZ : <input type="text" name="xyz" value="" />
</div>
<div id="three" class="sub" style="display:none;">
    Full Name: <input type="text" name="fname" value="" />
</div>

＆＃13;

您唯一要做的就是在创建第四个选项时将classname添加到divs数组中。古德勒克。

Answer 3

这就是你要找的东西吗？

<强> HTML

<div>
    One : <input type="radio" name="typeof" data-target="#one" class="radiobtn" value="grey" />
    Two : <input type="radio" name="typeof" data-target="#two" class="radiobtn" value="pink" />
    Three : <input type="radio" name="typeof" data-target="#three" class="radiobtn" value="green" />   
<div>
<div class="toTarget" id="one" >
    ABC : <input type="text" name="abc" value="" />
    PQR : <input type="text" name="pqr" value="" />
</div>
<div class="toTarget" id="two" >
    XYZ : <input type="text" name="xyz" value="" />
</div>
<div class="toTarget" id="three" >
    Full Name: <input type="text" name="fname" value="" />
</div>

<强> CSS

.toTarget{
  display:none;
}

<强>的javascript

$('.radiobtn').click(function(){
var color = $(this).val();
var Thistarget = $(this).attr('data-target');
$('.toTarget').css('display','none');
$(Thistarget+' input').attr('required');
$(Thistarget).css({
'display':'block'
});
});

Working Fiddle

为选定的单选按钮div添加类名

3 个答案: