onClick() Изменение видимости JavaScript

Я очень новичок в написании кода, поэтому, пожалуйста, простите любое незнание с моей стороны. У меня есть простой бит кода, в котором я хотел бы, чтобы видимость пары «внешних элементов» отключилась, когда пользователь щелкает в любом месте страницы. Я пробовал несколько способов, но он просто не работает. Если у кого-то есть предложение, я бы очень признателен. Вот то, что я до сих пор:onClick() Изменение видимости JavaScript

<body onload = "startBlink()" onclick = "onOff()"> 
<p id = "title">Click anywhere to turn the outer circles on or off.</p> 
<div class = "container" onclick = "onOff()"> 
    <div class = "outerCircle" id = "outerLeftCircle"> 
     <div class = "innerCircle" id = "innerLeftCircle"> 
     </div> 
    </div> 

    <div class = "outerCircle" id = "outerRightCircle"> 
     <div class = "innerCircle" id = "innerRightCircle"> 
     </div> 
    </div> 
</div><!-- Closes the container div --> 


<script> 
    // This function blinks the innerCircle div // 
    function startBlink(){ 
     var colors = ["white","black"]; 
     var i = 0; 
      setInterval(function() { 
       $(".innerCircle").css("background-color", colors[i]); 
       i = (i+1)%colors.length; 
      }, 400); 
    } 

    // This function turns the outerCircle divs on or off // 
    function onOff() { 
     alert("Entering function now"); 
     if (getElementById(".outerCircle").style.visibility = "visible") { 
      getElementById(".outerCircle").style.visibility = "hidden"; 
      getElementById(".outerLeftCircle").style.visibility = "hidden"; 
      getElementById(".outerRightCircle").style.visibility = "hidden"; 
     } else { 
      getElementById(".outerCircle").style.visibility = "visible"; 
      getElementById(".outerLeftCircle").style.visibility = "visible"; 
      getElementById(".outerRightCircle").style.visibility = "visible"; 
     } 
    } 

</script>

источник

2015-02-22 jsmwrench

Просто быстрый вопрос. Почему вы не используете jQuery полностью? Вы используете его внутри метода startBlink, но не в методе onOff. Любая причина для этого? – puelo

'getElementById (". ExternalCircle ")' - ваша проблема, используйте 'querySelector (". ExternalCircle ")' вместо или '$ (". ExternalCircle ") [0]' во всех ваших getElement ... s ТАКЖЕ ваш 'if 'неверно, поместите' == 'insead вашего' = ' –

@puelo: Я думаю, что вопрос скорее: почему он не использует простой javascript полностью и не может использовать jQuery, поскольку он здесь не нужен? –

просто.

function onOff(){ 

$('.outerCircle').toggle() 

}

источник

2015-02-22 22:41:58

Так, глядя на ваш код, вы можете исправить это изменение все ваши getElementById() с querySelector(), потому что вы даете функцию getElementById() селектор CSS в качестве параметра, но он ждет селектор ид, которая представляет собой простую строку без # или . или что бы мы ни использовали в CSS.

Или, как @puelo указывал вы можете использовать JQuery вместо родной JavaScript, он уже загружен, так почему нет, вы можете использовать $() с CSS селекторов:

ОТЕЧЕСТВЕННОЙ Javascript: jsFiddle

// This function turns the outerCircle divs on or off // 
function onOff() { 
    alert("Entering function now"); 
    if (!document.querySelector("#outerLeftCircle").style.visibility || document.querySelector("#outerLeftCircle").style.visibility == "visible") { 
     document.querySelector("#outerLeftCircle").style.visibility = "hidden"; 
     document.querySelector("#outerRightCircle").style.visibility = "hidden"; 
    } else { 
     document.querySelector("#outerLeftCircle").style.visibility = "visible"; 
     document.querySelector("#outerRightCircle").style.visibility = "visible"; 
    } 
}

Jquery: jsFiddle

// This function turns the outerCircle divs on or off // 
function onOff() { 
    alert("Entering function now"); 
    if ($("#outerLeftCircle").css("visibility") === "visible") { 
     $("#outerLeftCircle")[0].style.visibility = "hidden"; 
     $("#outerRightCircle")[0].style.visibility = "hidden"; 
    } else { 
     $("#outerLeftCircle")[0].style.visibility = "visible"; 
     $("#outerRightCircle")[0].style.visibility = "visible"; 
    } 
}

Jquery ... другой способ: jsFiddle

// This function turns the outerCircle divs on or off // 
function onOff() { 
    alert("Entering function now"); 
    if ($("#outerLeftCircle").css("visibility") === "visible") { 
     $(".outerCircle").css("visibility","hidden"); 
    } else { 
     $(".outerCircle").css("visibility","visible"); 
    } 
}

Другое дело в том, что ваш if неправильно, положить == INSEAD вашего =

EDIT:, как @KjellIvar прокомментировал: "Или еще лучше, поставить === вместо =" должен быть бит быстрее, чем двойной, из-за того, что не позволяет js-движку выполнять преобразования типов. для получения дополнительной информации:

StackOverflow: Does it matter which equals operator (== vs ===) I use in JavaScript comparisons?

ECMAScript: The Abstract Equality Comparison Algorithm and The Strict Equals Operator (===)

источник

2015-02-22 22:43:32

Или даже лучше, положите '===' вместо' = ':) –

@KjellIvar я не думаю, что лучше, но работает также;) –

Почему бы и нет? Вы знаете, что вы сравниваете строки здесь, поэтому нет смысла использовать свободное равенство и преобразование типов. –

onClick() Изменение видимости JavaScript

ответ

Смежные вопросы