Как управлять событиями для серии из группы переключателей?

0

У меня есть эта форма на веб-сайте и вам нужна помощь в выяснении того, как сделать код 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 с радио.

У кого-нибудь есть идея, как это сделать?

Теги:

2 ответа

1
Лучший ответ

Я думаю, что вам не хватает <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);
});

Вот рабочая скрипка

  • 0
    описание довольно большой кусок текста, я не могу просто использовать некоторые условные выражения в jquery и проверить что-то для отображения правильного текста?
  • 0
    Где хранится большой кусок текста? Данные-атрибуты могут хранить большое количество текста. stackoverflow.com/a/7734328/1217018
Показать ещё 1 комментарий
1

Я не уверен, что все ваши требования, но это будет отображать текст для каждого типа.

<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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню