Переключение между .wrap () и .unwrap () - PullRequest
Новая
       39

Переключение между .wrap () и .unwrap ()

0 голосов
/ 09 июля 2019

Пожалуйста, просмотрите демонстрационный код для проблемы. 

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('button').click(function () {
        $('p').wrapAll('<div class="container"></div>')
    });
});
</script>
<style type="text/css">
.container { background-color: yellow; padding: 10px; }
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<button>Toggle button</button>
</body>
</html>

Как удалить <div class="container"></div> при повторном нажатии кнопки, я знаю, что .unwrap () можно удалить, но я не знаю, как это сделать?

Заранее спасибо!

Ответы [ 3 ]

0 голосов
/ 09 июля 2019

Вы можете установить счетчик и проверить перенос, разверните, как показано ниже. 

$(document).ready(function() {
  let wrap = true;
  $('button').click(function() {
    if (wrap) {
      $('p').wrapAll('<div class="container"></div>')
      wrap = false;
    } else {
      $("p").unwrap();
      wrap = true;
    }
  });
});
.container {
  background-color: yellow;
  padding: 10px;
}
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>

</head>

<body>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <button>Toggle button</button>
</body>

</html>
0 голосов
/ 09 июля 2019

Вы можете просто использовать toggleClass () для этого. Надеюсь, это поможет 

$(document).ready(function(){
    $('button').click(function () {
        $('#wrapper').toggleClass('container')
    });
});
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<style type="text/css">
.container { background-color: yellow; padding: 10px; }
</style>
</head>
<body>
  <div id="wrapper">
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <button>Toggle button</button>
  </div>
</body>
</html>
0 голосов
/ 09 июля 2019

2 way:

Сначала добавляется переменная и переключается: 

$(document).ready(function(){
toggle = false;
    $('button').click(function () {
      if(!toggle){
        $('p').wrapAll('<div class="container"></div>');
      } else {
        $('p').unwrap();
      }
      toggle = !toggle;
    });
});
.container { background-color: yellow; padding: 10px; }
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<button>Toggle button</button>

Второе определение, если родительский элемент содержит div: 

$(document).ready(function(){
    $('button').click(function () {
      if(!$('p').parent().is( "div" )){
        $('p').wrapAll('<div class="container"></div>');
      } else {
        $('p').unwrap();
      }
    });
});
.container { background-color: yellow; padding: 10px; }
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<button>Toggle button</button>
...