Как перевести из js в jquery?

Question

[Helloeveryone]

Почему не работает. Вроде все правильно. Помогите, пожалуйста, буду очень благодарен.
это две функции js нужно повесить onclick

function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}

function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}

на jqwery переписал так.

$(".openBtn").on("click", function(){
$("#myOverlay").css.display = "block";
})

$(".closebtn").on("click", function(){
$("#myOverlay").css.display = "none";
})

вот html

<div id="myOverlay" class="overlay">
                <span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
                <div class="overlay-content">
                  <form action="/action_page.php">
                    <input type="text" placeholder="Search.." name="search">
                    <button type="submit"><i class="fa fa-search"></i></button>
                  </form>
                </div>
              </div>
              
              
              <button id="blnk" class="openBtn" onclick="openSearch()"><i class="fa fa-search"></i></button>

Comments

[Noder SS]

Helloeveryone, а html это крестик?

[Noder SS]

Helloeveryone, опять пусто, вы неправильно вставляете, вставьте его как код, а не текст

[Helloeveryone]

Noder SS, спасибо исправил

Answer 1

[Stanislav]

Без Jquery

function openSearch() {
  document.getElementById("myOverlay").style.display = "block";
}

function closeSearch() {
  document.getElementById("myOverlay").style.display = "none";
}

document.querySelector("#openSearchBtn").addEventListener("click", openSearch);
document.querySelector("#closeSearchBtn").addEventListener("click", closeSearch);

С Jquery

$(document).ready(function() {
  $('#openSearchBtn').click(function() {
    $('#myOverlay').css('display', 'block');
  });

  $('#closeSearchBtn').click(function() {
    $('#myOverlay').css('display', 'none');
  });
});

<button onclick="openSearch()">Открыть поиск</button>
<button onclick="closeSearch()">Закрыть поиск</button>

Comments

[Helloeveryone]

так без jqwery у меня все работает, просто я сейчас синтаксис jqwery изучаю.

[Алексей Дубровин]

Helloeveryone,
А зачем вам JQ учить в 23 году?)

[WbICHA]

Helloeveryone,

просто я сейчас синтаксис jqwery изучаю.

Зачем?

[Антон Литвиненко]

WbICHA, видимо потом у что весь код который попадается в работу написан на джейквери). не все ж с нуля пишут так как вздумается

[WbICHA]

Антон Литвиненко, сегодня 2023 год, на какой работе сегодня джейквери встретить можно?

[Антон Литвиненко]

WbICHA, скажем, учитывая например мое основное направление - вордпресс - так там только относительно недавно версию 1.12 сменили на 3.5, года не прошло еще

[WbICHA]

Антон Литвиненко, зачем сегодня идти в вордпресс?

Answer 2

[maksam07]

Смотрите примеры, как пользоваться методом css
api.jquery.com/css

Answer 3

[ThunderCat]

Жквери собсно имеет кучу удобных алиасов. Если быстро настругать какие-то манипуляции с группой элементов на нем даже удобнее, то в целом конечно лучше на ванила жс писать...

$(".openBtn").on("click", function(){
    $("#myOverlay").show();
});

$(".closebtn").on("click", function(){
    $("#myOverlay").hide();
});