如何在 javascript 函数中使用 for 循环

Question

我在图像中创建了几个地图区域。我想在点击时显示特定区域的描述。我使用了一个 javascript 函数。图像包含大约 15-20 个地图区域。以下是仅适用于 3 个区域的简单功能。这个工作正常。

function showdiv(id) {
                obj = document.getElementById(id);
                alert(obj);

                if (obj.style.display == 'block') {
                    obj.style.display = 'none';
                }
                if (obj.style.display == 'none') {
                    if (obj == whatever1) {
                        whatever1.style.display = 'block';
                        whatever2.style.display = 'none';
                        whatever3.style.display = 'none';
                    } else if (obj == whatever2) {
                        whatever2.style.display = 'block';
                        whatever1.style.display = 'none';
                        whatever3.style.display = 'none';
                    } else if (obj == whatever3) {
                        whatever3.style.display = 'block';
                        whatever2.style.display = 'none';
                        whatever1.style.display = 'none';
                    }
                }
            }

我认为这种方法对超过 15 个地图区域不公平。所以我尝试使用 for 循环。但是出了点问题。

 <script>
                function showdiv(id) {
                    obj = document.getElementById(id);
                    if (obj.style.display == 'block') {
                        obj.style.display = 'none';
                    }
                    if (obj.style.display == 'none') {
                        for (var i=0; i<=12; i++) {
                            var div = whatever + i;
                            if (div == obj) {
                                div.style.display = 'block';
                                home.style.display = 'none';
                            } else {
                                div.style.display = 'none';
                            }
                        }
                    }
                }
</script>

这个基本问题的解决方案是什么？有人有什么建议吗？？非常感谢您。

Answer 1

如果 whatever 是一个 string 那么您可以按以下方式进行操作：

var whatever = whatever+i;
var div = $(whatever);
alert(div);
if (div == obj) {
//.....your code continue.......

Answer 2

我建议您将所有 wahtever 元素总结为类。即：

<div id="whatever1" class="whateverElement"/>

然后在你的函数中你可以同样处理它们：

function showdiv(id) {
        obj = document.getElementById(id);
        var isBlock = (obj.style.display == 'block');

        //first change all elments
        var allElements = document.getElementsByClassName("whateverElement");

        for(var e in allElements){
            var element = allElements[e];
            element.style.display = "none";
        }

        //now change the value for the object with the given id
        if (isBlock) {
            obj.style.display = 'none';
        } else {
            obj.style.display = 'block';
        }
}

只是为了说明 "jQuery" 对于此类任务值得一试，下面的代码将使用 jQuery:

执行与上面相同的操作

function showdiv(id) {
    $(".whateverElement").hide();
    $("#" + id).show();
}

Answer 3

您必须通过

获取您的元素

div = document.getElementById("whatever" + i);

然后像你一样管理它...

如何在 javascript 函数中使用 for 循环

How to use for loop in javascript function

html

javascript

for-loop