请教各位,以下代码,如果我选择了其中之一的li,如何才能获取该li的value值?谢谢!
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/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.3/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();
});
</script>
</head>
<body>
<ol id="selectable">
<li class="ui-widget-content" value="1" >Item 1</li>
<li class="ui-widget-content" value="2" >Item 2</li>
<li class="ui-widget-content" value="3" >Item 3</li>
<li class="ui-widget-content" value="4" >Item 4</li>
<li class="ui-widget-content" value="5" >Item 5</li>
<li class="ui-widget-content" value="6" >Item 6</li>
<li class="ui-widget-content" value="7" >Item 7</li>
</ol>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Selectable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/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.3/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();
});
</script>
</head>
<body>
<ol id="selectable">
<li class="ui-widget-content" value="1" >Item 1</li>
<li class="ui-widget-content" value="2" >Item 2</li>
<li class="ui-widget-content" value="3" >Item 3</li>
<li class="ui-widget-content" value="4" >Item 4</li>
<li class="ui-widget-content" value="5" >Item 5</li>
<li class="ui-widget-content" value="6" >Item 6</li>
<li class="ui-widget-content" value="7" >Item 7</li>
</ol>
</body>
</html>
$( "#selectable" ).selectable({
selected: function( event, ui ) {alert($(ui.selected).attr('value'));}
});
我一直以为这个不可以,能帮忙解释一下吗?谢谢。
选中之后 选中的那一项会加一个样式 ui-selected 表示选中
然后就可以通过类选择器找到这个li