注册 登录
编程论坛 WEB前端(UI)

前段新手小白求教一个关于html dom的问题

fengpiaoguo 发布于 2016-08-24 23:42, 3716 次点击
学习时遇到一个问题,背景如下:
前端代码是循环呈现的
<div data='x'>(其中x自增,如1、2、3、4...)
    <button type="button" onclick='test()'>Click Me!</button>
</div>

想实现的效果是当点击该按钮时改变div中的内容,比如呈现一些其他如lable,input之类的。我的想法是js那边需要知道是哪个div,这样才能定位div改变它的内容,问题是不知道怎么在点击按钮事件发生时,把该button的父元素中的data属性的值传递到js那边,求各位大大的帮助。
1 回复
#2
shmilyflf2016-11-02 16:18
<body>
    <!--
    <div data='x'>(其中x自增,如1、2、3、4...)
        <button type="button" onclick='test()'>Click Me!</button>
    </div>

    当点击该按钮时改变div中的内容,比如呈现一些其他如lable,input之类的。

    我的想法是js那边需要知道是哪个div,这样才能定位div改变它的内容,

    问题是不知道怎么在点击按钮事件发生时,把该button的父元素中的data属性的值传递到js那边,求各位大大的帮助。  
    -->
    <div data='1'>
        <button type="button" onclick='test(this)'>Click Me_1!</button>
    </div>
    <div data='2'>
        <button type="button" onclick='test(this)'>Click Me_2!</button>
    </div>
    <div data='3'>
        <button type="button" onclick='test(this)'>Click Me_3!</button>
    </div>

    <script type="text/javascript">
        function test(ele) {
            var pNode = ele.parentNode;
            switch(pNode.getAttribute('data')) {
                case '1':
                pNode.innerHTML = "<lable>我是lable_1</lable>";
                break;
                case '2':
                pNode.innerHTML = "<lable>我是lable_2</lable>";
                break;
                case '3':
                pNode.innerHTML = "<lable>我是lable_3</lable>";
                break;
            }
        }
    </script>
</body>
1