JQuery的选择，结果表明在选择

插件演示消息：http://jqueryui.com/selectable/#serialize JQuery的选择，结果表明在选择

你好，我不太理解这个 “插件”，明确

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

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

我希望用户能够选择以下“按钮”中的一个，然后显示一条消息来代替所选号码（如演示中所示）

因此：您已选择：＃2。是：您已选择：英国，请转到这一点，做到这一点等等

即时猜测的最简单的方法是用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>

来源

2013-03-25 Benjamin

var index = $("#selectable li").index(this);

这抓住了，我们一直在通过元素的索引。我们不需要这条线。

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

该索引是降低DOM时元素出现的位置。

我们可以将上述内容更改为一件简单的事情。

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

编辑：见上面，this可以指整个UL，所以我们需要由被选择的项目进行过滤。如果您允许多选，请参阅下文。

$(".ui-selected", this).each(function(){ 
    $(this).text().appendTo(result); 
});

来源

2013-03-25 05:49:40 Ohgodwhy

看来它的选择一切想的？并用圆点显示列表？难道我做错了什么？ – Benjamin 2013-03-25 06:46:48

@ user1871802现在就来试试吧。小监督或许。 – Ohgodwhy 2013-03-25 07:12:44

嘿谢谢你在帮忙:)它必须是我我得到这个结果：http://i.imgur.com/TGq36sL.png只是一个点？ – Benjamin 2013-03-25 07:39:42

在插件的例子是显示所选择的指标..你不需要做...你需要做的就是让所选择的文本，并显示在跨度..所以使用.. html()或text() ..

试试这个

$(function() { 
    $("#selectable").selectable({ 
    stop: function() { 
     var result = $("#select-result"); 
     result.html($(this).html()); // result.text($(this).text()); 
    } 
    }); 
});

来源

2013-03-25 06:01:29 bipen

它似乎认为它选择了一切？ http://i.imgur.com/tBs6HxT.png – Benjamin 2013-03-25 06:39:27

JQuery的选择，结果表明在选择

回答

相关问题