Question

我在图片中创建了很少的地图区域。我想在onclick上显示特定区域的描述。我用了一个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个地图区域来说是不公平的。所以我试着用于循环。但出了点问题。

 <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

我建议您使用类汇总所有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';
        }
}

只是为了表明值得一看＆＃34; jQuery＆＃34;对于此类任务，以下代码将使用jQuery执行与上述相同的操作：

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

Answer 2

如果whatever是string，那么您可以执行以下操作：

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

Answer 3

你必须通过

获取你的元素

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

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

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

3 个答案: