Question

我完全迷失在这里。我正在尝试为具有连续编号ID的被调用多个元素进行可见性切换。该类已用于其他功能。我希望脚本运行循环以获取具有设置ID和连续数字的所有元素以切换可见性。这是我的代码。

<div>
<input type="checkbox" name="tag" id="angels" onclick="toggle_visibility('angelT');" />
<label for="angels"><span>Hide Angels</span>

</label>
</div>
<div id="angelT1" style="display:block">angel1</div>
<div id="angelT2" style="display:block">angel2</div>
<div id="angelT3" style="display:block">angel3</div>
<div id="angelT4" style="display:block">angel4</div>
<div id="angelT5" style="display:block">angel5</div>
<div id="angelT6" style="display:block">angel6</div>

这就是剧本。

<script type="text/javascript">
function toggle_visibility(id) {
    var e = document.getElementById(id);
    if (e.style.display == 'block') e.style.display = 'none';
    else e.style.display = 'block';
}
</script>

Answer 1

试试这个：

function toggle_visibility(prefix) {
   var i = 0;
   var e = null;

   do {
     ++i;
     var id = prefix + i;

     e = document.getElementById(id);

     if (e) 
       if (e.style.display == 'block') 
         e.style.display = 'none';
       else 
         e.style.display = 'block';
   } while (e);
}

示例：http://codepen.io/paulroub/pen/lhHby

Answer 2

id选择器非常具体，元素上的任何ID都不匹配。使用通用class来完成此任务可能会更好：

<div>
<input type="checkbox" name="tag" id="angels" onclick="toggle_visibility('angelT');" />
<label for="angels"><span>Hide Angels</span>

</label>
</div>
<div id="angelT1" class="angelT" style="display:block">angel1</div>
<div id="angelT2" class="angelT" style="display:block">angel2</div>
<div id="angelT3" class="angelT" style="display:block">angel3</div>
<div id="angelT4" class="angelT" style="display:block">angel4</div>
<div id="angelT5" class="angelT" style="display:block">angel5</div>
<div id="angelT6" class="angelT" style="display:block">angel6</div>


<script type="text/javascript">
    function toggle_visibility(className) {
        var e = document.getElementsByClassName(className);
        for (var i = 0; i < e.length; i++) {
            if (e[i].style.display == 'block') e[i].style.display = 'none';
            else e[i].style.display = 'block';
        }
    }
</script>

Answer 3

我相信使用jquery现在可以解决这个问题

$( "div[id^='"+id+"']" ).toogle();

https://api.jquery.com/attribute-starts-with-selector/

http://api.jquery.com/toggle/

通过具有连续编号ID的ID切换元素

3 个答案: