使用Jquery单选按钮功能隐藏/显示div

Question

我有文字&使用单选按钮将图像&文本应该出现在左边&正确的。如果选择左图标单选按钮，则图标应显示在左侧，如果选择右图标单选按钮，则文本应显示在右侧。下面是代码。我得到了下面的代码从同一平台做了一些改变。提前感谢

$(document).ready(function(){

$('input[type="radio"]').click(function(){
let typeValue = $('input[name="box"]:checked').val();
let directionValue = $('input[name="types"]:checked').val();
$('.imagetop,.imagebottom,.texttop,.textbottom').hide();
$('.' + typeValue + directionValue).show();
});   
});

.texttop, .textbottom, .imagebottom{display:none;}

.imagetop, .texttop{position: absolute; top: 9%; left: 50%;}

.imagebottom, .textbottom {position: absolute;  bottom: 20%;left: 50%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<p >Type</p>
<input type="radio" name="box" value="image" id="img" checked>
<label for="image">Image</label>
<br />
<input type="radio" name="box" value="text">
<label for="text">Text</label>      
</div>  
<div>
<p >Direction</p>
<input type="radio" id="top" name="types" value="top" checked>
<label for="top">Top</label>
<br />
<input type="radio" id="bottom" name="types" value="bottom">
<label for="bottom">bottom</label>      
</div>


<div class="imagetop" > 
<img src="smiley.gif"  width="42" height="42" > 
<span class="">top image</span>
</div>
<div class="imagebottom ">
<img src="smiley.gif" width="42" height="42">
<span class="">bottom image</span>
</div>

<div class="texttop">                           
<span class="">top text</span>
</div>
<div class="textbottom ">                          
<span class="">bottom text</span>
</div>

Answer 1

• 在<div class="wrapper">中包裹图像，文本和数字，并给它一个data属性来控制方向data-direction="top"
• 而不是使用imagecenter , imagetop....，你可以只使用一个元素的图像，并给它一个class="image"和text和number同样的事情
• 将方向文本替换为<span class="direction_text"></span>，我们将使用js更改此方向文本
• 要显示/隐藏类型，我们将使用add/removeClass，并将此类添加到cssdisplay:block

$(document).ready(function(){     
$('input[type="radio"]').on('change' ,function(){
let typeValue = $('input[name="box"]:checked').val();
let directionValue = $('input[name="types"]:checked').val();
$(".direction_text").text(directionValue); // change `<span class="direction_text"` with direction
$(".wrapper").attr("data-direction" , directionValue); // change `data-direction="top"` for wrapper to the new direction
$('.show').removeClass("show"); // hide all types
$('.' + typeValue).addClass("show"); // show the selected type
}).change(); // run the change event onload  
});

.text , .number , .image{display:none;}
.text.show , .number.show , .image.show{display:block;}

.wrapper[data-direction="top"]{position: absolute; top: 9%; left: 50%;}
.wrapper[data-direction="center"]{position: absolute;  top: 25%;left: 50%;}

.wrapper[data-direction="bottom"]{position: absolute;  bottom: 20%;left: 50%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<p >Type</p>
<input type="radio" name="box" value="image" checked>
<label for="image">Image</label>
<br />
<input type="radio" name="box" value="text">
<label for="text">Text</label>    
<br/>
<input type="radio" name="box" value="number">
<label for="number">Number</label>
</div> 
<div>
<p >Direction</p>
<input type="radio" id="top" name="types" value="top" checked>
<label for="top">Top</label>
<br />
<input type="radio" id="bottom" name="types" value="bottom">
<label for="bottom">bottom</label>    
<br/>
<input type="radio" id="center" name="types" value="center">
<label for="center">center</label>
</div>
<div class="wrapper" data-direction="top">
<div class="image" > 
<button type=button>
<img src="smiley.gif"  width="42" height="42" ><span class="direction_text"></span> image
</button>
</div>
<div class="text">                           
<span class=""><span class="direction_text"></span> text</span>
</div>
<div class="number ">                            
<span class="">number <span class="direction_text"></span></span>
</div>
</div>

最后一个建议当你的代码运行良好并按预期工作时，不要想太多。放下它，去做下一个任务不要浪费时间去寻找一个完美的代码。稍后你会学了很多东西，你就可以自己用你的自己的经验