如何从< span>获取文本元素< span>值由Javascript计算 [英] How to get text from a <span> element <span> value is calculated by a Javascript
本文介绍了如何从< span>获取文本元素< span>值由Javascript计算的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您好我现在已经创建了一个可选择的Jquery。
我想存储所选元素的值
我的代码是关注
< head >
< meta charset = utf-8 >
< title > jQuery UI Selectable - 使用TouchPunch显示为网格< / title >
< link < span class =code-attribute> rel = stylesheet href = http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css >
< script src = http://code.jquery.com/jquery-1.10.2.js > < ; / script >
< script src = http://code.jquery.com/ui/1.11.2/ jquery-ui.js > < / script >
< script >
/ *！
* jQuery UI Touch Punch 0.2.3
*
*版权所有2011-2014，Dave Furfero
*根据MIT或GPL第2版许可证进行双重许可。
*
*取决于：
* jquery.ui.widget.js
* jquery.ui.mouse.js
* /
！function（a ）{function f（a，b）{if（！（a.originalEvent.touches.length> 1））{a.preventDefault（）; var c = a.originalEvent.changedTouches [0]，d = document.createEvent（ MouseEvents）; d.initMouseEvent（b，0，0，窗口，1，c.screenX，c.screenY，c.clientX，c.clientY，1，1，1，1,0！！！ ，null），a.target.dispatchEvent（d）}} if（文档中的a.support.touch =ontouchend，a.support.touch）{var e，b = a.ui.mouse.prototype，c = b._mouseInit，d = b._mouseDestroy; b._touchStart = function（a）{var b = this;！e&& b._mouseCapture（a.originalEvent.changedTouches [0]）&&（e =！ ！0，b._touchMoved = 1，F（A， 鼠标悬停）中，f（A， 鼠标移动）中，f（A， 鼠标按下））}，b._touchMove =函数（）{E&安培;&安培;（！this._touchMoved = 0，F（一 鼠标移动））}，b._touchEnd =函数（）{E&安培;及（F（一 鼠标松开）中，f（A， 鼠标移出 ），this._touchMoved || f（a，click），e =！1）}，b._mouseInit = function（）{var b = this; b.element.bind（{touchstart：a.proxy（b ， _ touchStart），touchmove：a.proxy（b， _ touchMove），触摸结束：a.proxy（b，_ touchEnd）}），c.call（b）}，b._mouseDestroy = function（）{var b = this; b.element.unbind（{touchstart：a.proxy（b ， _ touchStart），touchmove：a.proxy（b， _ touchMove），touchend：a.proxy（b， _ touchEnd）}），d.call（b）}}}（jQuery的）;
< / script >
< style >
#feedback {font-size：1.4em; }
#selectable .ui-selecting {background：#FECA40; }
#selectable .ui-selected {background：＃F39814;白颜色; }
#selectable {list-style-type：none;保证金：0;填充：0;宽度：450px; }
#selectable li {margin：3px;填充：1px;向左飘浮;宽度：100px;身高：80px; font-size：4em; text-align：center; }
.resultarea {
background：＃cedc98;
border-top：1px solid＃000000;
border-bottom：1px solid＃000000;
颜色：＃333333;
字体大小：14px;
}
< / style >
< script >
$（function（）{
$（＃select）。selectable（）;
}）;
< / script >
< script >
$（function（）{
$（＃select）.selectable（{
selected：function（）{
var result = $（＃result ）.empty（）;
var label = $（＃label）。empty（）;
$（.ui-selected，this）.each（function（）{
var index = $（＃select le）。index（this）;
result.append（＃+（index + 1））;
label.append（＃+ （index + 1））;
}）;
}
}）;
}）;
< / script >
< / head >
< body > ;
< ol id = 可选择 >
< li class = ui-state-default Id = 1 > 1 < / li >
< li class = ui-state-default Id = 2 > 2 < / li >
< li class = ui-state-default Id = 3 > 3 < / li >
< li class = ui-state-default Id = 4 > 4 < / li >
< li class = ui-state-default Id = 5 > 5 < / li >
< li class = ui-state-default Id = 6 > 6 < / li < span class =code -keyword>>
< li class = ui-state-default Id = 7 > 7 < / li >
< li class = ui-state-default Id = 8 > 8 < / li >
< li class = ui- state-default Id = 9 > 9 < / li >
< li class = ui-state-default Id = 10 > 10 < / li >
< li class = ui-state -default Id = 11 > 11 < / li >
< li class = ui-state-default Id = 12 > 12 < / li > ;
< li class = ui-state-default Id = 13 > 13 < < span class =code-leadattribute> / li >
< li class = ui-state-default Id = 14 > 14 < / li >
< li class = ui-state-default < span class =code-attribute> Id = 15 > 15 < / li >
< li class = ui-state-default Id = 16 > 16 < / li >
< li class = ui-state-default Id = 17 > 17 < / li >
< li class = ui-state-default Id = 18 > 18 < / li >
< li < span class =code-attribute> class = ui-state-default Id = 19 > 19 < / li >
< li class = ui-state-default Id = 20 > 20 < / li >
< li 类 = ui-state-default Id = 21 > 21 < / li >
< li class = ui-state-default Id < span class =code-keyword> = 22 > 22 < / li >
< li class = ui-state-default Id = 23 > 23 < / li >
< li class = ui-state-default Id = 24 > 24 < / li >
< / ol >
< span class = resultarea > ; 所选产品< / span > ; >
< span < span class =code-attribute> id = result class = resultarea > < / span >
我已经为页面添加了一个标签以及一个id =label
如何让标签显示
中显示的值< span id =resultclass =resultarea>< / span>
解决方案
（function（）{
（＃select）。select（）;
}）;
< / script >
< script >
（function（）{
Hi i currently have created a Jquery selectable.
I want to store the values of the selected elements
my code is as follows
<head>
<meta charset="utf-8">
<title>jQuery UI Selectable - Display as grid with TouchPunch</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
/*!
* jQuery UI Touch Punch 0.2.3
*
* Copyright 2011–2014, Dave Furfero
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* Depends:
* jquery.ui.widget.js
* jquery.ui.mouse.js
*/
!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);
</script>
<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: 450px; }
#selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
.resultarea {
background: #cedc98;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
color: #333333;
font-size:14px;
}
</style>
<script>
$(function() {
$( "#selectable" ).selectable();
});
</script>
<script>
$(function() {
$( "#selectable" ).selectable({
selected: function() {
var result = $("#result").empty();
var label = $("#label").empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append(" #" + (index + 1));
label.append(" #" + (index + 1));
});
}
});
});
</script>
</head>
<body>
<ol id="selectable">
<li class="ui-state-default" Id="1">1</li>
<li class="ui-state-default" Id="2">2</li>
<li class="ui-state-default" Id="3">3</li>
<li class="ui-state-default" Id="4">4</li>
<li class="ui-state-default" Id="5">5</li>
<li class="ui-state-default" Id="6">6</li>
<li class="ui-state-default" Id="7">7</li>
<li class="ui-state-default" Id="8">8</li>
<li class="ui-state-default" Id="9">9</li>
<li class="ui-state-default" Id="10">10</li>
<li class="ui-state-default" Id="11">11</li>
<li class="ui-state-default" Id="12">12</li>
<li class="ui-state-default" Id="13">13</li>
<li class="ui-state-default" Id="14">14</li>
<li class="ui-state-default" Id="15">15</li>
<li class="ui-state-default" Id="16">16</li>
<li class="ui-state-default" Id="17">17</li>
<li class="ui-state-default" Id="18">18</li>
<li class="ui-state-default" Id="19">19</li>
<li class="ui-state-default" Id="20">20</li>
<li class="ui-state-default" Id="21">21</li>
<li class="ui-state-default" Id="22">22</li>
<li class="ui-state-default" Id="23">23</li>
<li class="ui-state-default" Id="24">24</li>
</ol>
<span class="resultarea">Selected Product</span>>
<span id="result" class="resultarea"></span>
I have added a label to the page as well with an id="label"
How can i get the label to display the value which is shown in the
<span id="result" class="resultarea"></span>
解决方案
(function() {
( "#selectable" ).selectable(); }); </script> <script>
(function() {
这篇关于如何从< span>获取文本元素< span>值由Javascript计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
