jquery 怎么判断点击当前li下的哪一个元素

jquery 怎么判断点击当前li下的哪一个元素,第1张

$(document)ready(function(){

$("li")children()click(function(){//当li下的子元素被点击时触发

alert('点击了li下的'+$(this)[0]tagName);//获取被点击元素的标签

});

});

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

1、HTML结构

<ul id="test">

<li>Glen</li>

<li>Tane</li>

<li>John</li>

<li>Ralph</li>

</ul>

2、javascript代码

windowonload = function(){

var obj_lis = documentgetElementById("test")getElementsByTagName("li");

for(i=0;i<obj_lislength;i++){

obj_lis[i]onclick = function(){

alert(thisinnerHTML);

}

}

}

3、效果演示

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

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

var myCont = [];

var lis = documentquerySelectorAll('li');

for (var i =0; i<lislength; i++){

    lis[i]i = i;

    lis[i]onclick = function(){

        var cont = thisinnerHTML;

        myContpush(cont);

        consolelog(myCont);

    }

}

希望可以帮助到你,Jensonhui

The Harder You Work , The Luckier You Will Be

比较简单, 用live:

$("#showtitle")live("click",function () {

                    var id = $("#showtitle>ul>li")attr("value");

                    alert(id);

 });

你绑定个onclick事件好了,然后吧this当参数传进去,在js中处理,根据传入object对象,获取该对象的id属性,这个时候你就知道是谁被选中了,然后还要处理一下冒泡事件。

这是javascript版本的。完成点击按钮放幻灯片的业务,都差不多,你自己看看做吧。javascript和jquery差不多,获取参数的是attr(“id”)。

function display(obj){

$("tp")stylebackgroundImage="url('/TSKJ/images/"+objid+"jpg')";

stopBubble(e);

}

//解决ul中的冒泡事件

function stopBubble(e){

if(e){

estopPropagation();

}else{

windoweventcancelBubble = true;

}

}

因为不仅一个li,你这样写是拿不到任何一个li的值,你想要获取全部li的值,只能自己写个函数来循环得到里面所有的li的值,给ul绑定一个叫test的id,然后执行下下面的代码

windowonload = function(){

    var obj_lis = documentgetElementById("test")getElementsByTagName("li");

    for(i=0;i<obj_lislength;i++){

        obj_lis[i]onclick = function(){

            alert(thisinnerHTML);

        }

    }

}

以上就是关于jquery 怎么判断点击当前li下的哪一个元素全部的内容,包括:jquery 怎么判断点击当前li下的哪一个元素、js如何获取点击<li>标签里的值、js获取li为选中状态下的内容,li可以选择多个等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9687706.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-30
下一篇2023-04-30

发表评论

登录后才能评论

评论列表(0条)

    保存