stackoom
  简体   繁体   中英

Make JS part simpler

 原文  2014-12-18 20:24:45  3   4    javascript/ html/ switch-statement

Question

So, I have a webpage like this. Three buttons swich between divs and there's not much code for that. But if I had 15 div to switch between, there will be much more code. Is there any way to make my JS code simpler? 

<!DOCTYPE>
<html>
<head>
    <style type="text/css">
        .info {
            width: 400px;
            height: 580px;
            margin: 40px;

            float: right;
        }

    </style>
</head>

<body>

    <div class="info" id="swapper-first" style="display:block; border:2px dashed red; padding:25px;">
        <p style="margin:0; color:red;">
            Red div
        </p>
    </div>

    <div class="info" id="swapper-second" style="display:none; border:2px dotted blue; padding:25px;">
        <p style="margin:0; color:blue;">
            Blue div
        </p>
    </div>

    <div class="info" id="swapper-third" style="display:none; border:2px solid green; padding:25px;">
        <p style="margin:0; color:green;">
            Green div
        </p>
    </div>

    <p style="text-align:center; font-weight:bold;">
        <a href="javascript:mred('swapper-first','swapper-second', 'swapper-third')">Red</a>
        <a href="javascript:mblue('swapper-first','swapper-second', 'swapper-third')">Blue</a>
        <a href="javascript:mgreen('swapper-first','swapper-second', 'swapper-third')">Green</a>
    </p>

    <script type="text/javascript">
        function mred(div1,div2,div3) {
            d1 = document.getElementById(div1);
            d2 = document.getElementById(div2);
            d3 = document.getElementById(div3);

            d1.style.display = "block";
            d2.style.display = "none";
            d3.style.display = "none";
        }

        function mblue(div1,div2,div3) {
            d1 = document.getElementById(div1);
            d2 = document.getElementById(div2);
            d3 = document.getElementById(div3);

            d1.style.display = "none";
            d2.style.display = "block";
            d3.style.display = "none"
        }

        function mgreen(div1,div2,div3) {
            d1 = document.getElementById(div1);
            d2 = document.getElementById(div2);
            d3 = document.getElementById(div3);

            d1.style.display = "none";
            d2.style.display = "none";
            d3.style.display = "block"
        }
    </script>
</body>
</html>

4 answers

solution1
 2  2014-12-18 20:29:43

In JQuery this would be a possiblity. 

function swapDiv(id){
    $('.info').hide(); //hides everything
    $('#'+id).show(); //shows the div with the ID that was passed in
}

Just add the 'divs' class to all your divs. Call the function by passing int he ID of the div you want to remain visible.

swapDiv('swapper-first')

solution2
 1  2014-12-18 20:33:18

Untested, but should work:

HTML:

Add a data attribute to your href, with the div you want to make visible: 

    <a href="javascript:divs()" data-value="swapper-third">Green</a>

JS: 

function divs() {
            var a = document.querySelectorAll('div.info');
            var b = this.getAttribute('value');


    for (var i = 0;i<a.length;i++) {
        a[i].style.display = 'none'; 
    }
            document.getElementById(b).style.display = 'block';
}

solution3
 0  2014-12-18 20:34:02

Use an array: 

function mred(divs) {
   for (var i=0; i < divs.length; i++) {
     var div = document.getElementById(divs[i]);
     div.style.display = "block";
   }
}

solution4
 0  2014-12-18 20:36:39

Here you go 

<!DOCTYPE>
<html>
<head>
    <style type="text/css">
        .info {
            width: 400px;
            height: 580px;
            margin: 40px;

            float: right;
        }

    </style>
</head>

<body>

    <div class="info" id="swapper-first" style="display:block; border:2px dashed red; padding:25px;">
        <p style="margin:0; color:red;">
            Red div
        </p>
    </div>

    <div class="info" id="swapper-second" style="display:none; border:2px dotted blue; padding:25px;">
        <p style="margin:0; color:blue;">
            Blue div
        </p>
    </div>

    <div class="info" id="swapper-third" style="display:none; border:2px solid green; padding:25px;">
        <p style="margin:0; color:green;">
            Green div
        </p>
    </div>

    <p style="text-align:center; font-weight:bold;">
        <a href="javascript:mcolor('swapper-first')">Red</a>
        <a href="javascript:mcolor('swapper-second')">Blue</a>
        <a href="javascript:mcolor('swapper-third')">Green</a>
    </p>

    <script type="text/javascript">
    function mcolor(_id) {
        elements = document.getElementsByClassName('info')
        for(var i = 0; i < elements.length; i++) {
            if(elements[i].id == _id) {
                elements[i].style.display = 'block';
            } else {
                elements[i].style.display = 'none';
            }
        }
    }
    </script>
</body>
</html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to make it simpler js with php loop Make jQuery code simpler Is there a simpler way to make this expandable menu? Can someone make this script simpler? How to make code more readable and simpler can I make update many in mongoose simpler? How to use Lodash to make this mapping simpler? Backbone.js: Simpler save success handle Is there a simpler way to get formData with pure js? JS: Is it possible to make part of a variable dependent on the parameter of a function?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM