导航:首页 > 编程语言 > js获取点击的li

js获取点击的li

发布时间:2023-01-29 07:24:49

A. js获取当前点击的<li>的值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.ul1{

height:50px;
list-style-type:none;
margin-top:2px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
}
.li1{
width:46px;
float:left;
margin-left:2px;
border-top:1px solid #000000;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-left:1px solid #000000;
height:46px;
list-style-type:none;
text-align:center;
line-height:46px;
}
</style>
<script>
function aa(num){
var bombs = new Array(num);
var flag = 0;
while( flag < num ){
bomb = Math.round(Math.random()*(num*num-1));
var f = true;
for(var i = 0 ; i <=flag ; i++){
if(bomb == bombs[i]){
f = false;
break;
}
}
if(f){
bombs[flag++] = bomb;
}
}
return bombs;
}
function createDiv(num,bombs){
var pDiv = document.getElementById("pdiv");
for(i = 0 ; i < num ; i++){
var flag = false;
var newUl = document.createElement("ul");
newUl.className = "ul1";
for(j = 0 ; j < num ; j++){
var newLi = document.createElement("li");
newLi.className = "li1";
newLi.id = "li" + (i*num + j);

flag = 0;
for(k = 0 ; k < num ; k++){
if(bombs[k] == (i*num + j)){
flag = true;
break;
}
}
if(flag){
var newtext = document.createTextNode(-1);
}else{
var newtext = document.createTextNode(0);
}
newLi.appendChild(newtext);
newUl.appendChild(newLi);
}
pDiv.appendChild(newUl);
}
}
function creatBox(num){
var bombs = aa(num);
createDiv(num,bombs);
return bombs;
}
function play(num){
var bombs = creatBox(num);
var temps = new Array(num*num -1);
for(i = 0 ; i < num*num; i ++){
temps[i] = 0;
}
for( j = 0 ;j < num; j++){
temps[bombs[j]] = -1;
}
lis = document.getElementsByTagName("li");
for(i = 0 ; i < lis.length ; i++){
lis[i].onclick=function ss(){
liid = this.id;
num = parseInt(liid.substring(2));
if(temps[num] == -1){
alert("你踩到雷了");
}else{
alert(temps[num]);
}
}
lis[i].oncontextmenu=function tt(){
liid = this.id;
num = parseInt(liid.substring(2));
if(temps[num] == -1){
alert("你排到雷了");
}else{
alert(temps[num]);
}
return false;
}
}
}
function myplay(){
var pDiv = document.getElementById("pdiv");
pDiv.innerHTML = "";
num = parseInt(document.getElementById("nd").value);
play(num);
}
</script>
<select name="nd" onchange="myplay()" id="nd">
<option value="4">简单</option>
<option value="10">中等</option>
<option value="20">难</option>
</select>
</head>
<body>

<div id="pDiv">
</div>
<script language="javascript">
play(6);
</script>
</body>
</html>
最近学dom写的一个小代码,本来是写扫雷的,也没写完,你看看,我现在就是点击li,显示li里的内容,运行一下就知道了
原理还是创建li的时候给它加上id
var newLi = document.createElement("li");
newLi.className = "li1";
newLi.id = "li" + (i*num + j);

然后取的时候根据id取就可以了
lis = document.getElementsByTagName("li");
for(i = 0 ; i < lis.length ; i++){
lis[i].onclick=function ss(){
liid = this.id;
num = parseInt(liid.substring(2));
if(temps[num] == -1){
alert("你踩到雷了");
}else{
alert(temps[num]);
}
}
}

B. 如何用vue.js获取当前点击的li

data里放一个now
然后给每个li添加点击事件,点击后把当前li的数据放到now里

C. js如何获取点击<li>标签里的值

给每一个iframe定义名称 然后你的 a标签 设置 target="打开页面的iframe名称"

D. js怎样获取点击的是第几个li

<!DOCTYPEhtml>
<head>
<styletype="text/css">
ul{
list-style:none;/*去掉ul前面的符号*/
margin:0px;/*与外界元素的距离为0*/
padding:0px;/*与内部元素的距离为0*/
width:auto;/*宽度根据元素内容调整*/
}
/*所有class为menu的div中的ul中的li样式*/
ulli{float:left;/*向左漂移,将竖排变为横排*/}
#ulImagesli{display:none};
</style>
<script>
functionshow(id){
varimages=document.getElementById("ulImages").getElementsByTagName("li");
for(vari=0;i<images.length;i++){
images[i].style.display="none";
}
images[id].style.display="block";
}
</script>
</head>
<body>
<divid="t_c_ggao">
<ulid="ulImages">
<listyle="display:block"><imgsrc="images/list-1.jpg"width="480"height="200"/>1</li>
<li><imgsrc="images/list-1.jpg"width="480"height="200"/>2</li>
<li><imgsrc="images/lp570.jpg"width="480"height="200"/>3</li>
<li><imgsrc="images/qx570.jpg"width="480"height="200"/>4</li>
<li><imgsrc="images/ys570.jpg"width="480"height="200"/>5</li>
<li><imgsrc="images/zx570.jpg"width="480"height="200"/>6</li>
<li><imgsrc="images/list-1.jpg"width="480"height="200"/>7</li>
</ul>
<ulid="list_number">
<li><ahref="#"onclick="show(0)">1</a></li>
<li><ahref="#"onclick="show(1)">2</a></li>
<li><ahref="#"onclick="show(2)">3</a></li>
<li><ahref="#"onclick="show(3)">4</a></li>
<li><ahref="#"onclick="show(4)">5</a></li>
<li><ahref="#"onclick="show(5)">6</a></li>
<li><ahref="#"onclick="show(6)">7</a></li>
</ul>
</div>
</body>
嗯?貌似我回答晚了,仅供参考吧,欢迎交流学习qQgroup21/77/712

E. javascript获取当前<ul>中点击的<li> 的值

var ul = document.getElementById('parent');
var lis = ul.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
lis[i].onclick = function(){
alert(this.innerHTML);
}
}

F. js如何获取点击<li>标签里的值

思路:为li对象添加单击事件→事件触发后利用innerHTML获取li的文本。实例演示如下:

1、HTML结构内

<ulid="test">
<li>Glen</li>
<li>Tane</li>
<li>John</li>
<li>Ralph</li>
</ul>

2、javascript代码

window.onload=function(){
varobj_lis=document.getElementById("test").getElementsByTagName("li");
for(i=0;i<obj_lis.length;i++){
容obj_lis[i].onclick=function(){
alert(this.innerHTML);
}
}
}

3、效果演示

G. JS如何获取指定DIV下的子元素LI值

1、新建一个html文件,命名为test.html,用于讲解JS如何获取指定DIV下的子元素LI的值。

H. js如何获取li的值

事件改写一下:onclick="btshow(this)";>

function btshow(select){
var value=select.innertext();
}

希望能帮助到你,谢谢!

I. js获取li为选中状态下的内容,li可以选择多个

1 定义一个数组,li绑定点击onclick事件,点击时获取li内容,jq就是版.val() ,JS就是innerHTML;

2 每点击获取一个就push到数组里;

varmyCont=[];
varlis=document.querySelectorAll('li');
for(vari=0;i<lis.length;i++){
lis[i].i=i;
lis[i].onclick=function(){
varcont=this.innerHTML;
myCont.push(cont);
console.log(myCont);
}
}

希望权可以帮助到你,Jensonhui

The Harder You Work , The Luckier You Will Be .

J. 如何用js获取li标签值

获取方法如下版:权
<script type="text/javascript" src="/scripts/jquery-1.7.2.min.js"></script>
<script >
$("li").click(function(){
alert($(this).text())
})
</script>

阅读全文

与js获取点击的li相关的资料

热点内容
手机文件误删能否恢复数据 浏览:955
照片文件名中的数字代表什么 浏览:44
cs6裁切工具 浏览:235
数据库超过多少数据会卡 浏览:858
CAD落图文件 浏览:125
怎样翻译文件内容 浏览:679
戴尔r910安装linux 浏览:69
有线电视升级失败 浏览:560
火绒安全把文件删掉了在哪里找 浏览:503
手机qq网络状态方框 浏览:225
哪里有文件纸袋 浏览:873
复制的东西能不能粘贴到空文件夹 浏览:876
酒店没有网络如何缴费 浏览:380
win10开机滚动很久 浏览:520
可对元数据实例进行的操作有什么 浏览:934
什么后缀的文件kit 浏览:295
word行书字体库下载 浏览:579
iosuc版本历史版本 浏览:14
电影字幕文件制作软件 浏览:723
windows10免密码登录 浏览:762

友情链接