标题:前段新手小白求教一个关于html dom的问题
只看楼主
fengpiaoguo
Rank: 1
等 级:新手上路
帖 子:2
专家分:0
注 册:2016-8-24
 问题点数:0 回复次数:1 
前段新手小白求教一个关于html dom的问题
学习时遇到一个问题,背景如下:
前端代码是循环呈现的
<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那边,求各位大大的帮助。
搜索更多相关主题的帖子: button 元素 
2016-08-24 23:42
shmilyflf
Rank: 9Rank: 9Rank: 9
等 级:蜘蛛侠
威 望:5
帖 子:356
专家分:1008
注 册:2012-12-9
得分:0 
<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>
2016-11-02 16:18



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-468169-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.371846 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved