2 flybird99 flybird99 于 2017.09.17 08:51 提问

遍历某DIV下所有li,并在每个子li点击时触发此DIV的样式修改

如题,我是这样写的,不知道哪里不对,请帮忙调下,谢谢!

 <script>
   window.onload=function(){
     var divs =  document.getElementsByTagName("#col-lg-2");
    $("#dd-item").onclik(function()
            {divs.style.csstext='width: 25%; height:100%; position:fixed; top:350px; overflow-y:3px;'}) 
        }
 </script>      

 <div id="col-lg-2" class="col-lg-2" style="width: 25%">
  <ol class="dd-list">
                                    <li class="dd-item" data-id="1">
                                        <div class="dd-handle" id="li_Preliminary_Analysis">初步分析</div>
                                    </li>
                                    <li class="dd-item" data-id="2">
                                        <div class="dd-handle" id="li_Early_Disposal">先期处置</div>
                                    </li>
                                    <li class="dd-item" data-id="3">
                                        <div class="dd-handle" id="li_Middle_Disposal">中期处置</div>
                                                                                                        </li>
                                </ol>
                                </div>

最好能将具体调整代码示范,不做过多设置

9个回答

sreddouilyongxia
sreddouilyongxia   2017.09.17 10:48
已采纳
 <script>
    window.onload=function(){
        var $_oDiv = document.querySelector("#col-lg-2");
        var $_aLis = $_oDiv.querySelectorAll('li');
        $_aLis.forEach(function(index, item){
            this.onclick = function(){
                $_oDiv.style.cssText='width: 25%; height:100%; position:fixed; top:350px; overflow-y:3px;
            }
        });
    }
</script>

<div id="col-lg-2" class="col-lg-2" style="width: 25%">
    <ol class="dd-list">
        <li class="dd-item" data-id="1">
            <div class="dd-handle" id="li_Preliminary_Analysis">初步分析</div>
        </li>
        <li class="dd-item" data-id="2">
            <div class="dd-handle" id="li_Early_Disposal">先期处置</div>
        </li>
        <li class="dd-item" data-id="3">
            <div class="dd-handle" id="li_Middle_Disposal">中期处置</div>
        </li>
    </ol>
</div>
sreddouilyongxia
sreddouilyongxia 倒数第二条忽略,不知道怎么保存上的
2 个月之前 回复
sreddouilyongxia
sreddouilyongxia 回复面向对象的夜猫子: 此条忽略,无法删除。
2 个月之前 回复
sreddouilyongxia
sreddouilyongxia 回复flybird99: var $_rDiv = document.querySelectorAll(".col-lg-10"),id是唯一性,所以通过document.querySelectorAll遍历多个div,通过循环 然后给每个div添加样式。
2 个月之前 回复
sreddouilyongxia
sreddouilyongxia 回复flybird99: var $_rDiv = document.querySelectorAll(".col-lg-10"),id多个div用这个方法可以获取到要遍历对象的数组,通过循环 然后给每个div
2 个月之前 回复
flybird99
flybird99 如果还有个DIV要改样式呢?我多加一个 var $_rDiv = document.querySelector("#col-lg-10");可以吗
2 个月之前 回复
showbo
showbo   Ds   Rxr 2017.09.17 13:53

你用了jquery没有了?jquery和原生dom没搞清楚你。。


<script>
    window.onload = function () {
        var items = document.querySelectorAll('.dd-item');//获取所有dd-item样式的控件
        var col = document.querySelectorAll('.col-lg-2');
        for (var i = 0; i < items.length; i++) {
            items[i].onclick = function () {
                for (var i = 0; i < col.length; i++) col[i].style.cssText = '';

                var div = this.parentNode.parentNode//点击的li所在col-lg-2容器
                //注意大小写,是cssText
                div.style.cssText = 'width: 25%; height:100%; position:fixed; top:350px; overflow-y:3px;'
            }
        }
    }
</script>

<div id="col-lg-2" class="col-lg-2" style="width: 25%">
    <ol class="dd-list">
        <li class="dd-item" data-id="1">
            <div class="dd-handle" id="li_Preliminary_Analysis">1初步分析</div>
        </li>
        <li class="dd-item" data-id="2">
            <div class="dd-handle" id="li_Early_Disposal">1先期处置</div>
        </li>
        <li class="dd-item" data-id="3">
            <div class="dd-handle" id="li_Middle_Disposal">1中期处置</div>
        </li>
    </ol>
</div>
<div id="col-lg-2" class="col-lg-2" style="width: 25%">
    <ol class="dd-list">
        <li class="dd-item" data-id="1">
            <div class="dd-handle" id="li_Preliminary_Analysis">2初步分析</div>
        </li>
        <li class="dd-item" data-id="2">
            <div class="dd-handle" id="li_Early_Disposal">2先期处置</div>
        </li>
        <li class="dd-item" data-id="3">
            <div class="dd-handle" id="li_Middle_Disposal">2中期处置</div>
        </li>
    </ol>
</div>
u010904759
u010904759   2017.09.17 09:42

用下jquery库可能实现js功能会更简单

timeless_go
timeless_go   2017.09.17 09:44

可以用事件代理delegate, 利用事件冒泡做

xiaoxiaoshuai__
xiaoxiaoshuai__   2017.09.17 10:33

你这段代码JS与JQ的用法已经混乱了,一共以下几点:(以下代码默认为你已经引入JQ了)
1.var divs = document.getElementsByTagName("#col-lg-2"); 这一句document.getElementsByTagName获取的是DOM中标签获取到的为结果集,你这确实给的一个 #col-lg-2
2. $("#dd-item").onclik(function(){});这一句你是用的JQ中的$()来获取DOM元素的,但是onclick是JS的点击事件。你这里混用了,JQ点击事件是这样的$('').click(function(){}); JS点击事件是这样的 XX.onclick=function(){};
3. $("#dd-item")根据id获取,而你的结构中根本没有id名为dd-item 的元素
4.cssText中的T是大写而不是小写,

就算你以上代码写对了,代码也是混乱的,主要是你的逻辑不对(以你架构的代码来看)
你要是想实现 当li点击的时候他的父级div的样式变的话为什么要给li加点击事件呢,直接在div上加点击事件不就行了吗(你div中也没有其他元素)?(除非你ol的 padding 或margin 设置的很大)

要是按照你的代码来更改的话应该是这样(不在div上添加点击事件):
var divs= document.getElementById("col-lg-2");
$(".dd-item").click(function(){
divs.style.cssText='width: 25%; height:100%; position:fixed; top:350px; overflow-y:3px;';
});

xiaoxiaoshuai__
xiaoxiaoshuai__   2017.09.17 10:36

如果你是JS和JQ还不能分辨太清就先写JS差不多了在用JQ写(单独的JQ),两个都差不多了在试着混用看看自己能否运用自如是否对这两个的理解透

sreddouilyongxia
sreddouilyongxia   2017.09.17 10:47

看看一下代码:

window.onload=function(){ var $_oDiv = document.querySelector("#col-lg-2"); var $_aLis = $_oDiv.querySelectorAll('li'); $_aLis.forEach(function(index, item){ this.onclick = function(){ $_oDiv.style.cssText='width: 25%; height:100%; position:fixed; top:350px; overflow-y:3px; } }); }
  1. 初步分析
  2. 先期处置
  3. 中期处置
qq_35826579
qq_35826579   2017.09.17 14:54
1 2 3 4
<script type="text/javascript">

    $('#propertyli').live('click', function() {
里面是li的单机事件需要执行的任务。
$('#propertyId').arr('background','#efefef');
    });
</script>
qq_35826579
qq_35826579 <li id="propertyli">1</li><li id="propertyli">2</li><li id="propertyli">3</li>
2 个月之前 回复
qq_35826579
qq_35826579 <div id="propertyId"></div>
2 个月之前 回复
Runner__1
Runner__1   Rxr 2017.09.17 09:06

你用的getElementsByTagName函数传入的参数应该是标签名,但是你写的却是id,获取所有li应该是这么写吧:

var divs =  document.getElementsByTagName("li");
flybird99
flybird99 改了还是不行,能否给个完整方案
2 个月之前 回复
Runner__1
Runner__1 回复flybird99: 那你就应该用getElementById呀
2 个月之前 回复
flybird99
flybird99 我想触发的是DIV的样式修改
2 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片