0

我正在使用qtip2在一组分组单选按钮中的选定单选按钮旁边添加一个 qtip。我可以在页面加载时正确显示 qtip，但是当所选单选发生更改时，我希望 qtip 跟随并指向新选中的单选按钮。我在这里有一个 jsfiddle突出了这个问题。如何让 qtip 指向新选中的单选按钮？

<html>
<head>
    <link href="http://craigsworks.com/projects/qtip_new/packages/nightly/jquery.qtip.css" rel="stylesheet" />
    <link href="mycss2.css" rel="stylesheet" />
    <style>
        #demo-simple{
            margin:100px;
        }

        input[type="radio"]{
            margin:20px;
        }
    </style>
</head>
<body>
    <div id="demo-simple" class="box">
        <div id="primary">
                <div>
                    <input type="radio" name="blah" checked /> Radio1
                </div>
                <div>
                    <input type="radio" name="blah" /> Radio2
                </div>
        </div>
    </div>    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="http://craigsworks.com/projects/qtip_new/packages/nightly/jquery.qtip.js" ></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#primary input[type='radio']:checked").qtip({
                content: {
                    text: 'I am selected'
                },
                show: {
                    ready: true,
                    delay: 0
                },
                hide: false,
                position: {
                    my: 'right center',
                    at: 'left center',
                    target: $("#primary input[type='radio']:checked")
                },
            });


            $("#primary input[type='radio']").change(function(evt){
                console.log(evt);
                console.log('changed');
                // manually reposition qtip??
            });
        });
    </script>
</body>

4

1 回答 1

3

在这里你可以使用这个代码Demo Fiddle

以下是您需要制作的功能

function updateqtip(){
 $("#primary input[type='radio']").qtip('destroy');
 $("#primary input[type='radio']:checked").qtip({
    content: {
        text: 'I am selected'
    },
    show: {
        ready: true,
        delay: 0
    },
    hide: false,
    position: {
        my: 'right center',
        at: 'left center',
        target: $("#primary input[type='radio']:checked")
    },
}); 
}

这是您如何使用此功能

$(document).ready(function () {
   updateqtip();


   $("#primary input[type='radio']").change(function(evt){
     console.log(evt);
     console.log('changed');
     updateqtip();
    // manually reposition qtip??
  });
});
于 2013-05-21T07:04:45.030 回答