js html 如何让每个li中的点击事件独立

js html 如何让每个li中的点击事件独立,第1张

<script type="text/javascript">

    /**

     * 由于原生 js  *** 作 ByTagName 比较不方便,所以建议通过 id 选择器来完成 *** 作

     * 首先可以为每一个 a 标签添加 id,id = "mylink_*"

     * 然后在 sel 方法中,使用两个参数,一个是对应的 a 的 mylink_* 中的 *,另外一个就是其中的第几副 img

     * 根据 a 标签的 id ,对应 *** 作 a 下对应下标的 img

     * 当然,你也可以通过父子节点 parentNode childNode 来完成,但是也比较麻烦

     */

    function sel(linkid, imgindex) {

        // 先找到 a 标签

        var link = document.getElementById("mylink_" + linkid)

        // 然后找 a 下的 img list

        var imgs = link.getElementsByTagName("img")

        var len = imgs.length

        if (len > 0) {

            for (var i = 0 i < len i++) {

                var img = imgs[i]

                // 根据下标显示隐藏

                if (i.toString() == imgindex.toString()) {

                    img.style.display = "block"

                } else {

                    img.style.display = "none"

                }

            }

        }

    } 

</script>

其中,你的 html 中 ul 中的 li 可以修改如下

    <li>

    <div class="img">

    <a id="mylink_1">

    <img style="display:block" src="1.jpg" alt="" />

    <img style="display:none"  src="2.jpg" alt="" />

    </a>

    </div>

    <div>

    <span onclick="sel(1,0)">1</span>

    <span onclick="sel(1,1)">2</span>

    </div>

    </li> 

    <li>

    <div class="img">

    <a id="mylink_2">

    <img style="display:block" src="1.jpg" alt="" />

    <img style="display:none"  src="2.jpg" alt="" /> 

    </a>

    </div>

    <div>

    <span onclick="sel(2,0)">1</span>

    <span onclick="sel(2,1)">2</span> 

    </div>

    </li>

思路:为li对象添加单击事件→事件触发后利用innerHTML获取li的文本。实例演示如下:1、HTML结构GlenTaneJohnRalph2、javascript代码window.onload = function(){var obj_lis = document.getElementById("test").getElementsByTagName("li")for(i=0i


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

原文地址: http://outofmemory.cn/zaji/6123054.html

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

发表评论

登录后才能评论

评论列表(0条)

保存