楼主,你好,针对你的问题,想要实现其实也十分简单,我用你的问题截图,举一个简单的例子,里面有详细的注释,你先看,如果不懂的可以问我。下面这个是个简单的实现,还可以扩展功能,使他们适用于更多的地方。在下面的例子中,我在对应的ul和span上面都加了一个id属性,为的是能够更快的找到对应的元素。当然,根据文档的结构,也可以不设置元素id,但是需要通过结果查找出来,相对来讲,设置了属性的元素更容易理解一些。

.selected {

background-color: #ccc;

}

  • 定价黄金
  • 计价黄金

$(function(){

//首先,我们在元素加载完成以后,初始化pj_items下每个li对应的单击事件,也就是选中事件

$("#pj_items li").bind("click", function(){

selectedItem(this);

});

});

//选中某个li响应的方法

function selectedItem(obj){

//获取当前发生单击事件的元素对象

var $elemThis = $(obj);

//现在我们向元素里添加名为selected的class样式

$elemThis.addClass("selected");

//由于是单选,所以我们需要将之前之前选中的li重置回去,即取消当前选中的样式selected

$elemThis.siblings().removeClass("selected");

//方法一、最后我们需要将当前选中的值放到我们需要的span上面去,也就是调用tackSelectedItem方法

//tackSelectedItem();

//方法二、当然,tackSelectedItem方法提供的是一种从全局查找选中元素的方法,还可以省略为下面的步骤,因为我们操作的当前元素就是我们想要的选项,我们可以直接取值并赋给对应的span元素

//也就是,先取得当前选中元素对应的文本内容

var txt_this = $elemThis.text();

$("#checkedPJLi").text(txt_this);

}

//从全局pj_items的ul查找选中li元素并将其文本内容赋值给checkedPJLi的span

function tackSelectedItem(){

//首先获取id="items"的ul下选中的li元素对象

var $selectedLi = $("#pj_items").find(".selected");

//然后通过这个元素对象,可以获取想要从它身上获取的它所拥有的一切,如:文本值

var txt_item = $selectedLi.text();

//又如属性值(当然,楼主并未提到,就作为扩展吧)

//var val_item = $selectedLi.attr("val");

//接下来楼主说的将值绑定到对应的span上了

$("#checkedPJLi").text(txt_item);

}

上面给span复制的方法一和方法二,二选其一即可,如果选了方法二,就可以不用tackSelectedItem方法,即可以删除。这里写出来,只是为了你可以更好的扩展提供一下思路。比如今后,你可以通过传递ul的id属性和需要绑定的li的id属性,通过一个方法就可以使用于页面上需要相同功能的位置。比如说扩展后的方法为:

/*ul_id:需要绑定选中并将值赋予span的ul的id属性值;span_id:与之对应的span元素的id属性值;selected_class:这组功能你所对应想要绑定的选中状态的样式名称(主要针对你可能需要不同的样式的情况,如果不需要刻意不传或默认一个就可以了)*/

function tackSelectedItem(ul_id, span_id, selected_class){

//首先获取id="items"的ul下选中的li元素对象

var $selectedLi = $("#"+ul_id).find("."+selected_class);

//然后通过这个元素对象,可以获取想要从它身上获取的它所拥有的一切,如:文本值

var txt_item = $selectedLi.text();

//接下来楼主说的将值绑定到对应的span上了

$("#"+span_id).text(txt_item);

}

js给页面给某个id赋值_js 给元素id赋值相关推荐

  1. Layui表单元素的赋值

    给表单元素赋值 $('#表单元素id').val(要赋予的值);

  2. js实现页面元素的拖拽

    平时在我们页面上,经常会悬浮着一些功能按钮,如帮助,联系客服等,按钮的显示比较简单,用定位悬浮在自己需要的位置上就行,比如下面的页面上我们展示一个帮助的按钮,用户点击后可以展示一些帮助的信息: 代码: ...

  3. jquery、js父子页面操作总结

    jquery 父.子页面之间页面元素的获取,方法的调用 https://www.cnblogs.com/it-xcn/p/5896231.html 一.jquery 父.子页面之间页面元素的获取,方法 ...

  4. 神策数据王磊:如何用 JS 实现页面录制与回放

    本文根据神策数据资深前端研发工程师王磊<如何用 JS 实现页面录制与回放>的直播整理而成.以下为正文: 一.业务背景 对于研发来说,总是需要处理一些线上问题.To B 和 To C 企业在 ...

  5. js 控制页面跳转的5种方法

    js 控制页面跳转的5种方法 编程式导航: 点击跳转路由,称编程式导航,用js编写代码跳转. History是bom中的History.back是回退一页Histiory.go(1)前进一页Histo ...

  6. 利用css和js实现页面的标签效果。(标签个数可以动态变化)

    利用css和js实现页面的标签效果 css <style> .menu{ margin-bottom:-15px;width: 800px; } .menu li{ display:blo ...

  7. 如是使用JS实现页面内容随机显示

    之前有个客户咨询我,因为他们公司的业务员有多个人,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平.本文我们将和大家 ...

  8. [网络收集]JS刷新页面总和!多种JS刷新页面代码!

    1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔10秒刷新一次 2) < ...

  9. 多种JS刷新页面代码!

    1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔10秒刷新一次 2) < ...

最新文章

  1. 常考数据结构与算法:容器盛水问题
  2. 安卓实训项目:基于储存卡音乐播放器实训报告4.0
  3. Condition接口详解
  4. kafka(一)-为什么使用kafka
  5. 马斯克在推特暗示将亲自负责一款社交媒体App开发
  6. vue 可用于交互的表格
  7. linux正则表达式脚本实例,Shell下的正则表达式及实例
  8. 华为模拟器eNSP安装教程
  9. 卡尔曼滤波算法推导及MATLAB实现
  10. Google Earth、百度地图、高德地图数据原来是这么来的
  11. C++ map通过key获取value
  12. js获取今天剩余时间_Node.js 在微医的应用场景及实践
  13. EasyUI给databox,timebox赋予当前时间
  14. 开源web框架_带有酷名称的开源JavaScript和Web框架的词汇表
  15. 一步一步学Silverlight 2系列(1):创建一个基本的Silverlight应用
  16. linux中的kill 终止进程
  17. 微信公众号原创功能怎么开通?
  18. GeneXus Beta版本已经集成区块链技术
  19. 分布式商城项目-后台开发-SSM工程整合网站模板
  20. 一起做RGB-D SLAM(3)

热门文章

  1. HttpClient4.X 解决POST请求返回重定向问题
  2. 智慧城市主题汇总(至2023年02月08日)
  3. 【报告分享】2021青年男女健康报告-腾讯新闻x冈本(附下载)
  4. 环形链表的快慢指针相遇问题以及相遇位置的证明
  5. 在VMare中kali安装nessus详解
  6. 百度确认吕聘离职 或因渡鸦音箱销量不佳定位失误
  7. 关于 Python3.6.3 写简单发送邮件代码时遇到的新浪邮箱(2018/7/29)的问题
  8. Python-数据处理:iloc和loc的用法
  9. 一个准大龄女程序员的婚姻线
  10. Smartbi分页报表设置,轻松实现报表分页展示