0

プラグインのデモ: http://jqueryui.com/selectable/#serialize

こんにちは、私はこの「プラグイン」をよく理解していません。具体的には

result.append( " #" + ( index + 1) ); &

<span>You've selected:</span> <span id="select-result">none</span>.

ユーザーが次の「ボタン」のいずれかを選択してから、選択した番号の代わりにメッセージを表示できるようにしたい (デモのように)

だから: あなたは選択しました: #2. 次のようになります: あなたが選択したもの: UK, please goto this and do that etc...

最も簡単な方法はJavaScriptを使用することだと思います

if "select-result" = 1 then
else

なんか？

どんな助けでも素晴らしいでしょう！これがばかげた質問ではないことを願っています...

コード：

<html>
<head>
<title>jQuery UI Selectable - Serialize</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery- ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {
$( "#selectable" ).selectable({
  stop: function() {
    var result = $( "#select-result" ).empty();
    $( ".ui-selected", this ).each(function() {
      var index = $( "#selectable li" ).index( this );
      result.append( " #" + ( index + 1) );
    });
  }
});
});
</script>
</head>
<body>
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>

<ol id="selectable">
<li class="ui-widget-content">UK</li>
<li class="ui-widget-content">USA</li>
<li class="ui-widget-content">FR</li>
<li class="ui-widget-content">AU</li>
<li class="ui-widget-content">CA</li>
<li class="ui-widget-content">DE</li>
</ol>
</body>
</html>
4

2 に答える 2

0

プラグインの例では、選択したインデックスを表示しています..それを行う必要はありません.選択したテキストを取得してスパンで表示する必要があります..使用..html()またはtext()..

これを試して

 $(function() {
   $( "#selectable" ).selectable({
    stop: function() {
         var result = $( "#select-result" );
         result.html($(this).html());  // result.text($(this).text());
    }
  });
});
于 2013-03-25T06:01:29.227 に答える
0 
var index = $( "#selectable li" ).index( this );

これは、渡された要素のインデックスを取得します。この行は必要ありません。

result.append( " #" + ( index + 1) );

インデックスは、DOM を下降する際に要素が出現する位置です。

上記の行を 1 つの単純なものに変更できます。

$( ".ui-selected", this ).text().appendTo(result);

編集：上記をthis参照してください。ul全体を参照する場合があるため、選択したアイテムでフィルタリングする必要があります。複数選択を許可している場合は、以下を参照してください。

$( ".ui-selected", this ).each(function(){
    $(this).text().appendTo(result);
});
于 2013-03-25T05:49:40.470 に答える