Question

我在网站上有这个表单，需要一些帮助来弄清楚如何让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>

我想要做的是显示关于每个选项的另一个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');
        });
    });
});

到目前为止，这只是显示文本悬停在其中一个无线电上。

此外，我想根据相应html radio元素的value属性显示自定义文本。我还希望一旦鼠标在带有无线电的div的页面上的某个地方，就会隐藏infodiv。

任何人都知道如何做到这一点？

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

Answer 2

我认为你错过了<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>

有了这个并使用jQuery的数据功能，您可以像这样添加一个mouseover事件监听器：

$(document).on('mouseover',"input[name='class']",function(){
    var desc = $(this).data('description');
    $('#infodiv').text(desc);
});

这是一个有效的fiddle

如何管理一系列单选按钮的事件？

2 个答案: