Question

我已经尝试了几个小时来解决以下问题。我用相当复杂的

做到了

带有广播框选择的列表，下面是所选放射性标签的描述;
鼠标悬停在每个项目上时，会显示相同位置的描述（所有其他描述都会消失）;
当鼠标没有悬停在某个项目上时，将显示与已检查的radiobox匹配的描述（所有其他描述都会消失）;

我完全承认我的jQuery知识处于最低水平，主要是因为我自己从不需要使用它。在谷歌上花了几个小时，一些令人费解的事情让我得到了一切，但却解决了整个问题。我刚才有一个工作的JS脚本，只是代码太多了，看看我现在的位置，看起来Jquery可以给我一个更短更简洁的代码。

现在我得到了以下HTML：

<style type="text/css">
   .options .active {font-weight: bold;}
   .descriptions span {display: none;}
   .descriptions span.active {display: block;}
</style>

<div class="options">
   <label><input name="permForumcon" type="radio" value="10" /> option1</label>
   <label><input name="permForumcon" type="radio" value="50" />option2</label>
   <label><input name="permForumcon" type="radio" value="70" /> option3</label>
</div>

<div class="descriptions">
   <span>description1</span>
   <span>description2</span>
   <span>description3</span>
</div>


$(document).ready(function() {
options = $('.options > label');
descriptions = $('.descriptions > span');
options .each(function(idx) {$(this).data('slide', descriptions.eq(idx));}).hover(
    function() {
        options .removeClass('active');
        descriptions.removeClass('active');             
        $(this).addClass('active');  
        $(this).data('slide').addClass('active');
     }, function() {
        switches.removeClass('active');
        slides.removeClass('active');
         $('input[name=permForumcon]:checked + label').addClass('active') //this is where is already doesnt seem to work
        }
 );});

on Jsfiddlle：http://jsfiddle.net/mqcP9/8/

剩下的问题是，它（选项中标签上添加的活动类和描述中的范围）不会更改回选定的radiobox。在查看jsfiddle沙箱时，我尝试了几个可见的注释。谁能在最后一部分帮助我？

Answer 1

将此作为您的“悬停”功能：

function() {
    options.removeClass('active');
    descriptions.removeClass('active');
    $('label:has(input:checked)').addClass('active');
    $('label:has(input:checked)').data('slide').addClass('active');
}

已检查标签的选择器已关闭，这实际上是它的根源。

jQuery：在收音机盒上隐藏/显示元素更改已检查＆amp;徘徊

1 个答案: