Показать и скрыть при нажатии jQuery

Question

У меня есть 3 привязных тега и по щелчку Я хочу показать div дальше по странице. И тогда я хочу скрыть текущий div (тот, который показан дальше по странице), если щелкнуть другой тег привязки. До сих пор мой код выглядит следующим образом:

$(document).ready(function() { 
$('.text-show-1').on('click', function (e) { 
    e.preventDefault(); 
    $('.container-show-1').removeClass('hide'); 
}); 

текст шоу-1 является то, что в настоящее время щелкнуло, контейнер-шоу-1 является то, что показывается по щелчку.

Я попробовал свою собственную инструкцию if внутри инструкции, и это получилось так, но это не сработало.

$(document).ready(function() { 
$('.text-show-1').on('click', function (e) { 
    e.preventDefault(); 
    $('.container-show-1').removeClass('hide'); 
    if ($('.text-show-2').on('click', function() { 
      $('.container-show-1').addClass('hide'); 
     })) 
    if else($('.text-show-3').on('click', function() { 
      $('.container-show-1').addClass('hide'); 
     })) 
}); 

всякая помощь была бы принята с благодарностью. Приветствия!

Answer 1

Если вы используете JQuery

, чтобы скрыть элемент использовать $(".container-show-1").hide();

$(document).ready(function() { 
$('.text-show-1').on('click', function (e) { 
    e.preventDefault(); 
    $('.container-show-1').show(); 
}); 
$('.text-show-2').on('click', function() { 
      $('.container-show-1').hide(); 
     }); 
$('.text-show-3').on('click', function() { 
      $('.container-show-1').hide(); 
     }); 
}); 

Не уверен, если это то, что вы ожидаете увидеть.

Answer 2

попробовать что-то вроде этого:

$("button").click(function(){ $("div").hide(1000); }); 

Answer 3

Используете ли вы .show(), .hide() или .toggle() до вас. Прочитайте jQuery documentation.

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

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

$(document).ready(function() { 

$('.text-show-1').on('click', function (e) { 
    e.preventDefault(); 
    $('.container-show-1').show(); 
    }); 

$('.text-show-2').on('click', function (e) { 
    e.preventDefault(); 
    $('.container-show-1').hide(); 
    //should you also be showing other things? 
}); 

    $('.text-show-3').on('click', function (e) { 
    e.preventDefault(); 
    $('.container-show-1').hide(); 
}); 

}); 

Answer 4

Такого рода вещи легче управлять путем давать подобные элементы общего класса и/или data- атрибут, так что вы можете выбрать их все сразу и назначить один общий обработчик событий. Обработчик события тогда просто нуждается в некотором роде, чтобы узнать, какой div относится к щелканному элементу. Один из способов сделать это - дать каждому якорю атрибут data-, который определяет id или class связанного div.

Так может быть, немного что-то вроде этого:

$(document).ready(function() { 
 
    // Hide all of the divs initially: 
 
    $('.associated').addClass('hide'); 
 
    
 
    // When any anchor with the data- attribute is clicked: 
 
    $('a[data-associated]').on('click', function (e) { 
 
    e.preventDefault(); 
 
    // Hide any div currently showing: 
 
    $('.associated').addClass('hide'); 
 
    // Unhide the div associated with the clicked item by using the 
 
    // value from the anchor's data- attribute: 
 
    $('#associated-' + $(this).attr("data-associated")).removeClass('hide'); 
 
    }); 
 
});

.hide { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a href="#associated-1" data-associated="1">Show 1</a> 
 
<a href="#associated-2" data-associated="2">Show 2</a> 
 
<a href="#associated-3" data-associated="3">Show 3</a> 
 

 
<div class="associated" id="associated-1">Content One</div> 
 
<div class="associated" id="associated-2">Content Two</div> 
 
<div class="associated" id="associated-3">Content Three</div>

Примечание: Я дал каждому Div уникальный id. Вы можете использовать уникальный номер class, но для идентификации уникальных предметов есть id. Кроме того, я установил href якорей для id связанных с ним разделов - это совершенно необязательно и не связано с поведением hide/show, но это означает, что пользователь отключил JavaScript, щелкнув якорь, перейдем к этим divs как часть стандартного поведения якоря.)