0

私は2つの機能でUIスピナーを使用していました.1つは中央の値を増減させ、同時に中央のリストが選択リストのポップアップとして表示されるため、中央のリストボタンで選択したリストの値を取得するにはどうすればよいですか.

フィドルはここにありますフィドル

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 に答える