Обнулить эвент после выполнения

149

17 февраля 2019, 18:00

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

<script> 
$('#loadmore').click(function(){ 
    $('#mores').css("display", "inherit"); 
    $(this).css("display", "none") 
  }); 
</script>

Answer 1

Не используйте на Вашей странице повторяющиеся id. Этот атрибут должен однозначно идентифицировать элемент - отсюда и название. Замените их на class="loadmore" и class="mores".

$('.loadmore').click(function(){
    $(this).closest(".row").find('.mores').css("display", "inherit");
    $(this).css("display", "none")
});

P.S. Логично было бы дать ссылку на Ваш предыдущий вопрос, чтобы дать отвечающим контекст, в котором выполняется код, приведенный в вопросе.

Answer 2

function loadContainer() { 
    var select = document.querySelector('[name=js-containers]'); 
    var selectedOption = select.options[select.selectedIndex].value; 
 
    var containers = document.querySelectorAll('.js-container'); 
    containers.forEach(function(el){ 
        el.style.display = 'none'; 
    }); 
 
    var currentContainer = document.querySelector(selectedOption); 
    currentContainer.style.display = 'block'; 
    currentContainer.querySelector('.js-hidden').style.display = 'none'; 
    currentContainer.querySelector('.js-view-more').style.display = 'block'; 
    currentContainer.querySelector('.js-view-more').addEventListener('click', function(evt){ 
        evt.target.style.display = 'none'; 
        currentContainer.querySelector('.js-hidden').style.display = 'block'; 
    }); 
} 
 
document.addEventListener('DOMContentLoaded', function() { 
    loadContainer(); 
    document.querySelector('[name=js-containers]').addEventListener('change', loadContainer); 
});

.js-container { 
    display: none; 
} 
.js-hidden { 
    display: none; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body> 
 
    <select name="js-containers"> 
        <option value="#js-container1">Container 1</option> 
        <option value="#js-container2">Container 2</option> 
        <option value="#js-container3">Container 3</option> 
        <option value="#js-container4">Container 4</option> 
        <option value="#js-container5">Container 5</option> 
    </select> 
 
    <div class="js-container" id="js-container1"> 
        <div class="js-visible">Visible part of container 1</div> 
        <div class="js-hidden">Hidden part of container 1</div> 
        <button class="js-view-more">View more</button> 
    </div> 
    <div class="js-container" id="js-container2"> 
        <div class="js-visible">Visible part of container 2</div> 
        <div class="js-hidden">Hidden part of container 2</div> 
        <button class="js-view-more">View more</button> 
    </div> 
    <div class="js-container" id="js-container3"> 
        <div class="js-visible">Visible part of container 3</div> 
        <div class="js-hidden">Hidden part of container 3</div> 
        <button class="js-view-more">View more</button> 
    </div> 
    <div class="js-container" id="js-container4"> 
        <div class="js-visible">Visible part of container 4</div> 
        <div class="js-hidden">Hidden part of container 4</div> 
        <button class="js-view-more">View more</button> 
    </div> 
    <div class="js-container" id="js-container5"> 
        <div class="js-visible">Visible part of container 5</div> 
        <div class="js-hidden">Hidden part of container 5</div> 
        <button class="js-view-more">View more</button> 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
</body> 
</html>

Answer 3

Если я правильно понял:
Ваш код скрывает первый блок и показывать второй.
Вы хотите ещё и действие наоборот (скрывать второй, показывать первый).

Если это так, то Вам нужно только реализовать действие наоборот.
Вы можете это сделать сами, либо воспользоваться моим вариантом.

$('.aa, .bb').on('click',function(){ 
  if($(this).hasClass('aa')){ 
  // Если .aa 
    $(this).hide(); // Прячем .aa 
    $('.bb').show(); // Показываем .bb 
  } else if($(this).hasClass('bb')) { 
  // Если .bb 
    $(this).hide(); // Прячем .bb 
    $('.aa').show(); // Показываем .aa 
  } 
});

.aa, .bb { 
  display: block; 
  width: 50px; 
  height: 50px; 
  line-height: 50px; 
  text-align: center; 
  font-size: 20px; 
  cursor: pointer; 
} 
 
.aa { 
  background: red; 
} 
 
.bb { 
  background: blue; 
  color: #fff; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="aa">a</div> 
<div class="bb" style="display: none;">b</div>