在Cascaded DIV上制作onClick事件

时间:2016-08-03 20:54:25

标签: html cascade jscript

我正在尝试做一些级联的html DIV,但还没有。

======概念==

1 - 起初应该如何:

| ParentDiv |

2 - 用户点击ParentDiv后:

| ParentDiv |

| ChildDiv1 | | ChildDiv2 | | ChildDiv3 |

======概念结束======

======代码到现在为止======

        <div class="Year" type="button" onClick="showMonths2016()"><p>2016</p</div>
            <div class="Month"><p>January</p></div>
            <div class="Month"><p>February</p></div>
            <div class="Month"><p>March</p></div>

    <script type="text/javascript">

        function = showMonths2016(){    
            document.getElementsByClassName("Month").style.display = "inline-block";
        }
    </script>

======代码到现在为止ENDS ======

所以,基本上,我设置类Month`显示为“none”(没有超过css,对不起,不知道如何将其格式化为代码)并且一旦用户点击“Div按钮”(类年份),它将规定的显示值更改为“内联块”,从而暴露月份分割:

  1. 用户点击年级;
  2. onClick事件唤起函数“showMonths2016”;
  3. 声明的功能将Month Divs的显示值从“none”更改为“inline-block”;
  4. 现在,Div Divs可见并以内联方式对齐。
  5. 我已经将changind预先设置的值(显示:无)手动测试为“内联块”,它就像魔法一样!但当我将其重置为“none”并尝试通过onClick事件触发它时......失败!

1 个答案:

答案 0 :(得分:0)

首先,您没有在第一行关闭getElementsByClassName标记。

其次<div class="Year" type="button" onclick="showDiv()"><p>2016</p></div> <div class="Month" style="display:none;"><p>January</p></div> <div class="Month" style="display:none;"><p>February</p></div> <div class="Month" style="display:none;"><p>March</p></div> 返回一个集合。除非你使用像jquery这样的框架,否则不能集体设置属性。

这是正确的代码:

<强> HTML:

function showDiv() {

   var elems = document.getElementsByClassName('Month');

    for(var i = 0; i != elems.length; i++)
    {
        elems[i].style.display = "block";
    }

}

<强>使用Javascript:

`public class MinimumSwap 
{
//function to find consecutive number index
public static int[] getMaxConsecutiveIndex(List<Integer> array)
{
    int desiredIndex = -1;
    int count = 0;
    int dupDesiredIndex = -1;
    int dupCount = 0;

    int i = 0;
    while(i < array.size())
    {
        if(array.get(i) == 0)
        {
            //pass duplcateIndex value to desiredIndex if count is more
            if(dupCount > count)
            {
                desiredIndex = dupDesiredIndex;
                count = dupCount;
            }
            dupDesiredIndex = -1;
            dupCount = 0;
        }
        else 
        {
            if(dupDesiredIndex == -1) 
            {
                dupDesiredIndex = i;
                dupCount = 1;
            }
            else
            {
                dupCount++;
            }
        }
        i++;
    }
    return new int[]{desiredIndex,count};
}

public static int swapCount(List<Integer> array,int startIndex, int      endIndex, boolean side)
{
    // side == false means 0 at the left
    // side == true means 1 at the left
    System.out.println("startIndex  "+startIndex+"  endIndex  "+endIndex+" side "+side);
    int swapCount = 0; 
    if(side == false)
    {
        while(startIndex <= endIndex)
        {
            if(array.get(endIndex) == 0) // swap from the end only if it is 0
            {
                //check for first 1 from left to swap
                while(array.get(startIndex) == 0 && (startIndex != endIndex))
                    startIndex++;

                if(array.get(startIndex) == 1)  
                {
                    // now swap
                    int temp = array.get(startIndex);
                    array.set(startIndex, array.get(endIndex));
                    array.set(endIndex,temp);
                    swapCount++;
                    endIndex--;
                }
            }
            endIndex--;
        }
    }
    else
    {
        while(startIndex <= endIndex)
        {
            if(array.get(startIndex) == 0) // swap from the starting only if it is 0
            {
                //check for first 1 from right to swap
                while(array.get(endIndex) == 0 && (startIndex != endIndex))
                    endIndex--;
                if(array.get(endIndex) == 1)    
                {
                    // now swap
                    int temp = array.get(startIndex);
                    array.set(startIndex, array.get(endIndex));
                    array.set(endIndex,temp);
                    swapCount++;
                    startIndex++;
                }
            }
            startIndex++;
        }
    }
    return swapCount;
}

public static void main(String...strings)
{
    List<Integer> arr = new ArrayList<Integer>();
    int temp[] = {0,1,1,0,0,0,1,1,1,0,1,1,1,0,1,1,1,1,0,1};
    //int temp[] = {1,0,0,1,1,0,1};
    for(int i=0; i<temp.length; i++)
        arr.add(temp[i]);


    int centerIndex = getMaxConsecutiveIndex(arr)[0];
    int consequtivecount = getMaxConsecutiveIndex(arr)[1];
    System.out.println("centerIndex "+centerIndex+"  consequtivecount "+consequtivecount);
    int swapCountLeft = swapCount(arr,0, centerIndex-1, false);
    int swapCountRight = swapCount(arr,centerIndex+consequtivecount, arr.size()-1, true);
    System.out.println("total swap count "+swapCountLeft+" :: "+swapCountRight);
    System.out.println("array after swapping "+arr);
}

现场观看:

https://jsfiddle.net/Anokrize/vq3sLtx3/