javascript - mismo - mostrar y ocultar div jquery
Mostrar y ocultar div al hacer clic en la imagen o botón de radio (5)
Tengo varias imágenes y sus respectivos botones de opción. Al hacer clic en una imagen o botón de radio, se muestran sus respectivos mostrar y ocultar div.
Pero no puedo lograr:
Al hacer clic en la imagen, el botón de opción respectivo también debe seleccionar (tener valor verdadero) cuando el texto se muestra
Cuando el texto se esconde, el botón de opción debe tener un valor falso.
Tengo el código hasta ahora:
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>
Código JavaScript
function Show_Div(Div_id) {
if (false == $(Div_id).is('':visible'')) {
$(Div_id).show(250);
} else {
$(Div_id).hide(250);
}
}
La radio es hija del elemento adyacente anterior.
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);
}
}
.prev()selecciona el elemento<p>que viene antes de la imagen.children()selecciona el elemento secundario (es decir, el botón de.children()en este caso)
Si agrega elementos adicionales a <p> es probable que necesite agregar selectores adicionales (por ejemplo, primero (), filtro ()) para profundizar en el elemento de entrada.
La ventaja de este enfoque es ...
No tiene que agregar ninguna etiqueta adicional #id a su código. Entonces, si planeas repetir este patrón, tendrás un detalle menos de qué preocuparte.
Obtenga el identificador div asignando Id como título para la radio correspondiente, y use alternar.
$("a").click(function(event) {
$(this).find(''input[type="radio"]'').prop("checked", true);
$(''input[type="radio"]'').change();
});
$(''input[name="group"]'').change(function() {
var divId = $(this).attr(''title'');
$(''#''+divId).toggle($(this).is(":checked"));
});
Aquí está el código
Pase la identificación como una cadena en lugar de como un objeto HTML. Use id para los botones de opción para establecer / deshacer sus valores. Para establecer un solo botón de radio a la vez y mostrar el div correspondiente con él, agregue la clase para los botones de div y de radio, oculte el div y establezca las radios en falso en la primera línea de la función Show_Div.
body {
padding: 5px;
}
label {
font-weight: bold;
}
input[type=text] {
width: 20em
}
p {
margin: 1em 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<body>
<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" id="Radio_Div_1" class="radio_btns" onclick="Show_Div(''Div_1'')"> Flower 1</p>
<div id="Div_1" class="divs" style="display: none;"><br>
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" id="Radio_Div_2" class="radio_btns" onclick="Show_Div(''Div_2'')"> Flower 2</p>
<div id="Div_2" class="divs" style="display: none;"><br>
Flower is orange.
</div>
</body>
<script>
function Show_Div(Div_id) {
$(".radio_btns").prop( "checked", false );
$(".divs").hide(250);
if (!$("#"+Div_id).is('':visible'')) {
$("#"+Div_id).show(250);
$( "#Radio_"+Div_id).prop( "checked", true );
} else {
$("#"+Div_id).hide(250);
$( "#Radio_"+Div_id).prop( "checked", false );
}
}
</script>
Agregue una comilla simple al pasar una cadena a una función. Puedes probar como:
HTML
<input type="radio" onclick="Show_Div(''Div_1'')">Flower 1</p>
JavaScript
function Show_Div(Div_id) {
$(''#''+Div_id).toggle(250);
}
Pruebe el siguiente código.
<script>
function Show_Div(Div_id) {
var divid = "#" + Div_id;
var inpcls = "." + Div_id;
if (false == $(divid).is('':visible'')) {
$(divid).show(250);
$(inpcls).prop("checked", true);
}
else {
$(divid).hide(250);
$(inpcls).prop("checked", false);
}
}
</script>
<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" class=''Div_1'' 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" class=''Div_2'' onclick="Show_Div(''Div_2'')">Flower 2</p>
<div id="Div_2" style="display: none;">
Flower is orange.
</div>