单击数组元素JS之间的jusmp以显示和隐藏div

时间:2018-10-18 21:16:26

标签: javascript arrays onclick

全部  这段代码在数组中选择了一个将隐藏/显示div的随机元素。 关键是我需要始终打开一个新按钮并使用相同的按钮隐藏上一个按钮。 我已经做到了,它显示了一个新的,但是并没有隐藏前一个。
随机性不是强制性的,但是它需要始终打开一个新元素并将其隐藏。我有点卡住

我希望您能了解一些线索。 非常感谢您的关注

document.getElementById("rojo").addEventListener("click", show);
var secret =  ["h-ma-1","h-ma-2","h-ma-3" ];
var s = secret[RndInt(0, 2)];

function RndInt(min, max) {
return Math.floor(Math.random() * (max - min+ 1) ) + min;}


function show (){

        for ( var i=0 ; i<=0 ; i++ ){
                if 
            (document.getElementById(s).style.display == "block")
                {
            document.getElementById(s).style.display = "none";
                }
                else 
                {
            document.getElementById(s).style.display = "block";
                }
        }


    }

2 个答案:

答案 0 :(得分:0)

此代码可以帮助您完成任务

document.getElementById("rojo").addEventListener("click", show);
var secret = ["h-ma-1", "h-ma-2", "h-ma-3"];
var s = secret[RndInt(0, 2)];

const DEFAULT_VISIBILITY = 'block';

const mapToggle = {
  'block': 'none',
  'none': 'block'
};

function getCurrentVisibility(node) {
  return node.style.display;
}

function getElementFromId(id) {
  return document.getElementById(id);
}

function toggleVisibility(node) {
  node.style.display = mapToggle[getCurrentVisibility(node) ||  DEFAULT_VISIBILITY];
}

function toggle(ids) {
  ids.forEach((id) => {
    var node = getElementFromId(id);
    if (node) {
      toggleVisibility(node);
    }
  });
}

function RndInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}


function show() {
  toggle(secret);
}
<div id="h-ma-1">h-ma-1</div>

<div id="h-ma-2">h-ma-2</div>

<div id="h-ma-3">h-ma-3</div>

<button id="rojo">toggle</button>

答案 1 :(得分:0)

到目前为止,这一直在帮助我解决问题,但是并不能通过使用数组本身来解决。因此可能很难进行维护
通过直接添加名称的最后一部分来更改div的名称来完成此操作。 我只是将所有div放在css中,为diplay = none。

谢谢

document.getElementById(“ rojo”)。addEventListener(“ click”,show);

function show (){

        for ( var i=-0 ; i<12 ; i++ ){
                s="h-ma-"+i;

        document.getElementById(s).style.display = "none";

        }
        document.getElementById("h-ma-"+Math.ceil(Math.random()*11)).style.display = "block";

                }