Question

我正在使用qtip2在一组分组单选按钮中的所选单选按钮旁边添加qtip。我可以在页面加载时正确显示qtip，但是当所选的收音机发生变化时，我希望qtip跟随并指向新选中的单选按钮。我有一个jsfiddle here突出了这个问题。如何让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>

Answer 1

您可以在此处使用此代码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??
  });
});

qtip2重新定位目标变化

1 个答案: