Кнопка требует 2 щелчка, чтобы поменять div - PullRequest
Новая
       23

Кнопка требует 2 щелчка, чтобы поменять div

0 голосов
/ 28 октября 2018

У меня есть простой обмен div при нажатии кнопок. Однако при первой загрузке страницы пользователю необходимо дважды щелкнуть кнопку, чтобы эта функция работала. После этого все работает хорошо. Любой совет, пожалуйста?

Мой код: 

<script type="text/javascript">
    function SwapDivsWithClick(div1, div2) {
        d1 = document.getElementById(div1);
        d2 = document.getElementById(div2);
        if (d2.style.display == "none") {
            d1.style.display = "none";
            d2.style.display = "block";
        } else {
            d1.style.display = "block";
            d2.style.display = "none";
        }
    }

</script>




<style>
    #swapper-other {
        width: 200px;
        height: 50px;
        background-color: darkred;
        color: #fff;
        display: none;
    }

    #swapper-first {
        width: 200px;
        height: 50px;
        background-color: yellowgreen;
        color: #444;
    }

</style>

 <div id="swapper-first">
    <p>
        <a href="javascript:SwapDivsWithClick('swapper-first','swapper-other')">(Swap Divs)</a>
    </p>


    <p style="margin:0; color:red;">
        This div displayed when the web page first loaded.
    </p>
</div>
<div id="swapper-other">
    <a href="javascript:SwapDivsWithClick('swapper-first','swapper-other')">(Swap Divs)</a>
    <p>
        This div displayed when the link was clicked.
    </p>
</div>

Ответы [ 3 ]

0 голосов
/ 28 октября 2018

Проблема в том, что значения дисплея css не отлавливаются JS d2.style.display Вместо этого попробуйте следующее 

function SwapDivsWithClick(div1, div2) {
    d1 = document.getElementById(div1);
    d2 = document.getElementById(div2);
    style = getComputedStyle(d2);
    if (style.display == "none") {
        d1.style.display = "none";
        d2.style.display = "block";
    } else {
        d1.style.display = "block";
        d2.style.display = "none";
    }
}

Получит CSS в момент вызова.

0 голосов
/ 28 октября 2018

Чтобы определить стили в пути, вы должны использовать метод getComputedStyle.

Ниже обновленная версия кода с вашим примером: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    #swapper-other {
        width: 200px;
        height: 50px;
        background-color: darkred;
        color: #fff;
        display: none;
    }

    #swapper-first {
        width: 200px;
        height: 50px;
        background-color: yellowgreen;
        color: #444;
    }

</style>
  <script type="text/javascript">
    function SwapDivsWithClick(div1, div2, e) {

        let d1 = document.getElementById(div1);
        let d2 = document.getElementById(div2);
        let computedStyleD1 = window.getComputedStyle(d1, null);
        let computedStyleD2 = window.getComputedStyle(d2, null);    
        if (computedStyleD2.display == "none") {             
            d1.style.display = "none";
            d2.style.display = "block";
        } else {
            d1.style.display = "block";
            d2.style.display = "none";
        }

      e.stopPropagation();         
    }

</script>
</head>
<body>
 <div id="swapper-first">
    <p>
        <a href='#' onclick="SwapDivsWithClick('swapper-first','swapper-other', event)">(Swap Divs)</a>
    </p>


    <p style="margin:0; color:red;">
        This div displayed when the web page first loaded.
    </p>
</div>
<div id="swapper-other">
    <a href='#' onclick="SwapDivsWithClick('swapper-first','swapper-other', event)">(Swap Divs)</a>
    <p>
        This div displayed when the link was clicked.
    </p>
</div>
</body>
</html>
0 голосов
/ 28 октября 2018

Когда вы делаете console.log(d2.style.display); непосредственно перед тем, если он ничего не покажет (пустая строка), по крайней мере, в моем Chrome.Вот почему это не = "none".Как следствие, if (d2.style.display == "none") не оценивается как истинное.
Измените на 

if (d2.style.display != "block")

, и оно будет работать!

Дальнейшие исследования: 

console.log("typeof d2.style.display: "+typeof(d2.style.display));
console.log("length of d2.style.display: "+d2.style.display.length);
// OUTPUT:
// typeof d2.style.display: string
// length of d2.style.display: 0

Даже дальнейшие исследования:
в css display: none; приведет к скрытому div, но значение не устанавливается в js.
Если я добавлю что-то вроде 'xyz' в display: xyz;, оно будет показано, нозначение не установлено в js.Если я напишу display: 'none';, то div не скрыт (конечно), но вычисляет if ...
Наконец: я не могу заставить console.log(d2.style.display); показывать что-либо, если оно не в кавычках или не установлено через javascript.

...