在点击图片或单选按钮时显示并隐藏div [英] Show and hide div on clicking image or radio button

问题描述

我有多个图像和他们各自的单选按钮。通过点击一个图像或单选按钮，他们各自的显示和隐藏div显示。

但我无法实现：

1. 单击图片时，相应的单选按钮也应该在文本显示时选择（具有真值）




2. 当文本隐藏时，单选按钮的值应为false。 如下所示：
   
   

   HTML
   
   

    < img src =http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/flower-icon.pngalt =onclick =Show_Div（Div_1）width = 100像素> 
   < p> 
   < input type =radioonclick =Show_Div（Div_1）> Flower 1< / p> 
   < div id =Div_1style =display：none;> 
   花是粉红色的。 
   < / div> 
   < br /> 
   < br /> 
    
    < p> 
   < input type =radioonclick =Show_Div（Div_2）> Flower 2< / p> 
   < div id =Div_2style =display：none;> 
   花是橙色的。 
   < / div> 
     

   
   
   

   JavaScript代码

   
   
   

     function Show_Div（Div_id）{
    if（false == $（Div_id）.is（'：visible'））{
    $（Div_id）.show（250）; 
   } else {
    $（Div_id）.hide（250）; 
   } 
   } 
     

   
   

   解决方案

   
   $ b

    函数Show_Div（Div_id）{
    if（！$（Div_id ）.is（'：visible'））{
    $（Div_id）.prev（）。children（）。prop（'checked'，true）; 
    $（Div_id）.show（250）; 
   } else {
    $（Div_id）.prev（）。children（）。prop（'checked'，false）; 
    $（Div_id）.hide（250）; 
    
    
    $ / code $ / pre 
    $ b $ ol 
    
    
     .prev（）选择图片之前的< p> 元素
    
    
    
    
     .children（）选择子元素（即在这种情况下的单选按钮）
    
    

如果您为< p> 添加其他元素，您可能需要添加额外的选择器first（），filter（））深入到输入元素。

这种方法的优点是...

您不必为代码添加任何其他#id标记。所以，如果你打算重复这种模式，你会有一个细节需要担心。

I have multiple images and their respective radio button. By clicking on an image or radio button their respective show and hide div is displaying.

But I am not able to achieve:

1. By clicking on the image the respective radio button should also select (have value true) when the text is showing

2. When the text is hiding then the radio button should have value false.

I have code so far as below:

HTML

<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/flower-icon.png" alt="" onclick="Show_Div(Div_1)" width="100px">
<p>
  <input type="radio" onclick="Show_Div(Div_1)">Flower 1</p>
<div id="Div_1" style="display: none;">
  Flower is pink.
</div>
<br/>
<br/>

<img src="http://www.clker.com/cliparts/0/d/w/v/V/p/pink-flower-md.png" alt="" onclick="Show_Div(Div_2)" width="100px">
<p>
  <input type="radio" onclick="Show_Div(Div_2)">Flower 2</p>
<div id="Div_2" style="display: none;">
  Flower is orange.
</div>

JavaScript code

function Show_Div(Div_id) {
  if (false == $(Div_id).is(':visible')) {
    $(Div_id).show(250);
  } else {
    $(Div_id).hide(250);
  }
}

解决方案

The radio is the child of the previous adjacent element.

function Show_Div(Div_id) {
  if (!$(Div_id).is(':visible')) {
    $(Div_id).prev().children().prop('checked', true);
    $(Div_id).show(250);
  } else {
    $(Div_id).prev().children().prop('checked', false);
    $(Div_id).hide(250);
  }
}

1. .prev() selects the <p> element that comes before the image

2. .children() selects the child element (ie the radio button in this case)

If you add additional elements to <p> you'll likely need to add additional selectors (ex first(), filter()) to drill down to the input element.

The advantage of this approach is...

You don't have to add any additional #id tags to your code. So, if you plan to repeat this pattern you'll have one less detail to worry about.

这篇关于在点击图片或单选按钮时显示并隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！