У меня есть эта форма на веб-сайте и вам нужна помощь в выяснении того, как сделать код jquery делать то, что я хочу.
Форма выглядит так:
<div>
<h4>Pick an option</h4>
<input type="radio" name="class" value="tree" checked/>Biological <br />
<input type="radio" name="class" value="radial tree"/>Geological<br />
<input type="radio" name="class" value="dendogram" />Chemical<br />
</div>
То, что я хочу сделать, - это показать в другой информации о каждом параметре. Я бы хотел, чтобы это поведение было связано с событием jQuery. Текст информации для каждого варианта, конечно, различен. Я не хочу запускать это событие при загрузке страницы, так как я уже выбрал значение по умолчанию.
До сих пор я так:
var Sel = $("input[name=class]:radio").get();
$.each( Sel, function(index, object) {
$(this).hover(function() {
$( "#infodiv" ).slideDown( "slow", function() {
$("infodiv").addClass('infodivstyle').text('Details here');
});
});
});
То, что это делает до сих пор, просто отображает этот текст над зависанием одного из радиостанций.
Далее я хотел бы отобразить пользовательский текст в соответствии с атрибутом value на соответствующем элементе радио html. Я также хочу, чтобы infodiv был скрыт, как только мышь находится где-то еще на странице из div с радио.
У кого-нибудь есть идея, как это сделать?
Я думаю, что вам не хватает <div>
из вашего вопроса:
<div>
<h4>Pick an option</h4>
<input type="radio" name="class" value="tree" checked="checked" data-description="bio"/>Biological <br />
<input type="radio" name="class" value="radial tree" data-description="geo"/>Geological<br />
<input type="radio" name="class" value="dendogram" data-description="chem"/>Chemical<br />
</div>
<div id="infodiv" >
some initial description
</div>
Используя это и используя функциональность data- jQuery, вы можете добавить прослушиватель событий на клавиатуре:
$(document).on('mouseover',"input[name='class']",function(){
var desc = $(this).data('description');
$('#infodiv').text(desc);
});
Вот рабочая скрипка
Я не уверен, что все ваши требования, но это будет отображать текст для каждого типа.
<style>
.details {
display: none;
}
</style>
<div>
<h4>Pick an option</h4>
<input type="radio" name="class" value="tree" checked="checked" class="option" />Biological <br />
<input type="radio" name="class" value="radial tree" class="option" />Geological<br />
<input type="radio" name="class" value="dendogram" class="option" />Chemical<br />
</div>
<div id="details-tree" class="details">Bio Stuff</div>
<div id="details-radial_tree" class="details">Geo Stuff</div>
<div id="details-dendogram" class="details">Chem Stuff</div>
<script>
$(function() {
$('.option').on('mouseover', function(e) {
console.log(e);
$('.details').slideUp('fast');
var $input = $(e.currentTarget);
var val = $input.val().replace(' ', '_');
$('#details-' + val).slideDown('slow');
});
});
</script>