Добавление класса в идентификатор с помощью JQuery

Question

Когда я нажимаю кнопку, моя таблица, вероятно, будет заменена видео, но когда я нажму кнопку, мой стол исчезнет, ​​и мое видео не появится. Что-то не так с моим кодом?

<script> 
var checkContent = 0; 
function contentChange(){ 
    if(checkContent == 0){ 
     $('#tableContent').addClass("hiddenContent"); 
     $('#videoContent').removeClass("hiddenContent"); 
     checkContent++; 
    }else{ 
     $('#tableContent').removeClass("hiddenContent"); 
     $('#videoContent').addClass("hiddenContent"); 
     checkContent--; 
    } 
} 
</script> 

Answer 1

Возможно, вы захотите проверить консоль в браузере (CTRL + SHIFT + J).

удалить также

`enter code here` 

если вы не ставили его там нарочно.

Если это все еще не работает, вероятно, у вас есть ошибка в CSS или HTML-коде.

Answer 2

Что-то вроде этого?

HTML:

<button>Click</button> 
<table id="tableContent"><tr><td>Table Content</td></tr></table> 
<div id="videoContent" class="hiddenContent">Video Content</div> 

JavaScript:

$("button").click(function() { 
    $('#tableContent').toggleClass("hiddenContent"); 
    $('#videoContent').toggleClass("visiblecontent"); 
}); 

CSS:

.hiddenContent{ display:none;} 
.visiblecontent{ display: block; } 

Fiddle here.

Простой, но я не знаю, что это хорошо для вас.

Answer 3

HTML:

<input type="button" id="btn" value="Click Me"></input> 

<div id="someContent" hidden>Some Content</div> 
<div id="videoContent">Video Content</div> 

JS:

document.getElementById("btn").onclick = function(){ 
    var someContent = document.getElementById("someContent"); 
    var videoContent = document.getElementById("videoContent"); 

    if(someContent.hasAttribute("hidden")){ 
     someContent.removeAttribute("hidden"); 
     videoContent.setAttribute("hidden", ""); 
    } 
    else{ 
     videoContent.removeAttribute("hidden"); 
     someContent.setAttribute("hidden", ""); 
    } 
} 

Попробуйте это если хорошо для вас:

http://jsfiddle.net/bigneo/40vLxLnm/