0

我曾经在两个功能中使用 UI 微调器，一个是增加中心值的减少，同时中心列表将显示为选择列表弹出窗口，所以我如何在中心列表按钮上获取选定的列表值。

小提琴在这里小提琴

jsfiddle 的代码在这里

$(document).ready(function(){   
        $(".bkt-close, .bkt-g1, .bkt-g2, .bkt-g3, .bkt-y1, .bkt-y2, .bkt-y3, .bkt-o1, .bkt-o2, .bkt-o3, .bkt-r").click(function(){
        $("#bkt-toolset").show();
    }),
        $("#bkt-toolset").mouseleave(function(){
        $("#bkt-toolset").hide();
    });
});

$(function(){

    var itemList = [

    ];

    var opts = {
        's1': {decimals:2},
        's2': {stepping: 0.25},
        's3': {currency: '$'},
        's4': {},
        's5': {
            //
            // Two methods of adding external items to the spinner
            //
            // method 1: on initalisation call the add method directly and format html manually
            init: function(e, ui) {
                for (var i=0; i<itemList.length; i++) {
                    ui.add('<a href="'+ itemList[i].url +'" target="_blank">'+ itemList[i].title +'</a>');
                }
            },

            // method 2: use the format and items options in combination
            format: '%(title) <a href="%(url)" target="_blank">&raquo;</a>',
            items: itemList
        }
    };

    for (var n in opts)
        $("#"+n).spinner(opts[n]);

    $("button").click(function(e){
        var ns = $(this).attr('id').match(/(s\d)\-(\w+)$/);
        if (ns != null)
            $('#'+ns[1]).spinner( (ns[2] == 'create') ? opts[ns[1]] : ns[2]);
    });
4

2 回答 2

0

通过将列表项更新为 A、B、C 等，我做了一些工作，但卡在了中间。这里的问题是：当我从工具提示中选择列表项时，微调器列表会更新为列表项的相同值。这是 jsfiddle 链接：http: //jsfiddle.net/daySA/17/

        $(document).ready(function(){   
    $(".bkt-close, .bkt-g1, .bkt-g2, .bkt-g3, .bkt-y1, .bkt-y2, .bkt-y3, .bkt-o1, .bkt-o2, .bkt-o3, .bkt-r").click(function(){
    $("#bkt-toolset").show();
         $("#bkt-toolset li").live('click', function() {
            var item=   $(this).html();
            //alert(item);
            $("#s1 li").prepend(item);
             $("#s1 li").click(function() {
                     $("#bkt-toolset").show();
                 });
             $("#s2 li").prepend(item);
             $("#s2 li").click(function() {
                     $("#bkt-toolset").show();
                 });
              $("#s3 li").prepend(item);
             $("#s3 li").click(function() {
                     $("#bkt-toolset").show();
                 });

            });
}),
    $("#bkt-toolset").mouseleave(function(){
    $("#bkt-toolset").hide();
});
       });

更新表格中的 html 代码

      <table>
<tr>
    <td><div style="height:100px">
   <ul id="s1">
<li><a href="#" class="bkt-close"> A</a></li>
<li><a href="#" class="bkt-g1">B</a></li>
<li><a href="#" class="bkt-g2"> C</a></li>
<li><a href="#" class="bkt-g3"> D</a></li>
<li><a href="#" class="bkt-y1"> E</a></li>
<li><a href="#" class="bkt-y2">F</a></li>
<li><a href="#" class="bkt-y3">G</a></li>
<li><a href="#" class="bkt-o1">H</a></li>
<li><a href="#" class="bkt-o2"> I</a></li>
<li><a href="#" class="bkt-o3">J</a></li>
<li><a href="#" class="bkt-r">K</a></li>
    </ul>

   <ul id="bkt-toolset">
<li><a href="#" class="bkt-close"> A</a></li>
<li><a href="#" class="bkt-g1">B</a></li>
<li><a href="#" class="bkt-g2"> C</a></li>
<li><a href="#" class="bkt-g3"> D</a></li>
<li><a href="#" class="bkt-y1"> E</a></li>
<li><a href="#" class="bkt-y2">F</a></li>
<li><a href="#" class="bkt-y3">G</a></li>
<li><a href="#" class="bkt-o1">H</a></li>
<li><a href="#" class="bkt-o2"> I</a></li>
<li><a href="#" class="bkt-o3">J</a></li>
<li><a href="#" class="bkt-r">K</a></li>
    </ul>
    </div>
    </td>
    </tr>
  <tr>
    <td><div>
    <ul id="s2">
<li><a href="#" class="bkt-close"> A</a></li>
<li><a href="#" class="bkt-g1">B</a></li>
<li><a href="#" class="bkt-g2"> C</a></li>
<li><a href="#" class="bkt-g3"> D</a></li>
<li><a href="#" class="bkt-y1"> E</a></li>
<li><a href="#" class="bkt-y2">F</a></li>
<li><a href="#" class="bkt-y3">G</a></li>
<li><a href="#" class="bkt-o1">H</a></li>
<li><a href="#" class="bkt-o2"> I</a></li>
<li><a href="#" class="bkt-o3">J</a></li>
<li><a href="#" class="bkt-r">K</a></li>
     </ul>

      <ul id="bkt-toolset">
<li><a href="#" class="bkt-close"> A</a></li>
<li><a href="#" class="bkt-g1">B</a></li>
<li><a href="#" class="bkt-g2"> C</a></li>
<li><a href="#" class="bkt-g3"> D</a></li>
<li><a href="#" class="bkt-y1"> E</a></li>
<li><a href="#" class="bkt-y2">F</a></li>
<li><a href="#" class="bkt-y3">G</a></li>
<li><a href="#" class="bkt-o1">H</a></li>
<li><a href="#" class="bkt-o2"> I</a></li>
<li><a href="#" class="bkt-o3">J</a></li>
<li><a href="#" class="bkt-r">K</a></li>
    </ul>
    </div>
    </td>
    </tr>
      <tr>
    <td><div>
   <ul id="s3">
<li><a href="#" class="bkt-close"> A</a></li>
<li><a href="#" class="bkt-g1">B</a></li>
<li><a href="#" class="bkt-g2"> C</a></li>
<li><a href="#" class="bkt-g3"> D</a></li>
<li><a href="#" class="bkt-y1"> E</a></li>
<li><a href="#" class="bkt-y2">F</a></li>
<li><a href="#" class="bkt-y3">G</a></li>
<li><a href="#" class="bkt-o1">H</a></li>
<li><a href="#" class="bkt-o2"> I</a></li>
<li><a href="#" class="bkt-o3">J</a></li>
<li><a href="#" class="bkt-r">K</a></li>
    </ul>

    <ul id="bkt-toolset">
<li><a href="#" class="bkt-close"> A</a></li>
<li><a href="#" class="bkt-g1">B</a></li>
<li><a href="#" class="bkt-g2"> C</a></li>
<li><a href="#" class="bkt-g3"> D</a></li>
<li><a href="#" class="bkt-y1"> E</a></li>
<li><a href="#" class="bkt-y2">F</a></li>
<li><a href="#" class="bkt-y3">G</a></li>
<li><a href="#" class="bkt-o1">H</a></li>
<li><a href="#" class="bkt-o2"> I</a></li>
<li><a href="#" class="bkt-o3">J</a></li>
<li><a href="#" class="bkt-r">K</a></li>
    </ul>
    </div>
    </td>
     </tr>

     </table>
于 2013-09-13T19:02:08.467 回答
-1

您可以通过简单地记住微调器状态来做到这一点。检查这个小提琴。获得值后，您现在可以轻松更改选定的微调器值。

var state = 0;
$(document).ready(function(){   
        $(".bkt-close, .bkt-g1, .bkt-g2, .bkt-g3, .bkt-y1, .bkt-y2, .bkt-y3, .bkt-o1, .bkt-o2, .bkt-o3, .bkt-r").click(function(){
        $("#bkt-toolset").show();
            state = state + 1;
            if(state == 2)
            {
                alert($(this).text());
                $("#bkt-toolset").hide(); 
                state = 0;
            }
    }),
        $("#bkt-toolset").mouseleave(function(){
        $("#bkt-toolset").hide();
    });   
});



$(function(){

    var itemList = [

    ];

    var opts = {
        's1': {decimals:2},
        's2': {stepping: 0.25},
        's3': {currency: '$'},
        's4': {},
        's5': {
            //
            // Two methods of adding external items to the spinner
            //
            // method 1: on initalisation call the add method directly and format html manually
            init: function(e, ui) {
                for (var i=0; i<itemList.length; i++) {
                    ui.add('<a href="'+ itemList[i].url +'" target="_blank">'+ itemList[i].title +'</a>');
                }
            },

            // method 2: use the format and items options in combination
            format: '%(title) <a href="%(url)" target="_blank">&raquo;</a>',
            items: itemList
        }
    };

    for (var n in opts)
        $("#"+n).spinner(opts[n]);

    $("button").click(function(e){
        var ns = $(this).attr('id').match(/(s\d)\-(\w+)$/);
        if (ns != null)
            $('#'+ns[1]).spinner( (ns[2] == 'create') ? opts[ns[1]] : ns[2]);
    });

});
于 2013-09-13T03:46:21.657 回答