Блог

Главная - Вопросы по программированию - Используя соединения jquery, но это не соединяет div вместе?

Используя соединения jquery, но это не соединяет div вместе?

#javascript #html #jquery #css

Вопрос:

Я пытаюсь создать эту страницу, на которой у меня есть разные div и кнопки, разбросанные по странице, и подключить их с помощью соединений jquery от musclesoft

Я пробовал этот код, но, похоже, соединения вообще не происходит, я не могу понять, в чем проблема?

 button {
  min-width: 120px;
  height: 120px;
  background: #f56c29;
  border-radius: 60px;
}

connection {
  border: 30px solid #b51c29;
  border-radius: 50px;
}


button.about {
  position: absolute;
  transition: .5s ease;
  top: 50%;
  left: 50%;
} 
 <!DOCTYPE html>
<html lang="en" >
<!-- Include jQuery and the Connections plugin -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.connections.js"></script>
<!-- Connect your elements like in this example -->
<script>
  jQuery(document).ready(function() {
    $('div').connections();
  });
</script>
<head>
  <meta charset="UTF-8">
  <title>CodePen - A Pen by rasbsal</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
  <div>
      <button>
          Text
      </button>
  </div>
  <div>
      <button class="about">
          About
      </button>
  </div>
</body>
</html>

Комментарии:

1. Вы проверили консоль на наличие ошибок?

2. Да, никаких ошибок вообще.

Ответ №1:

Соединения не видны, потому что на самом деле между div элементами нет места (перейдите в раздел «Проверка элемента» в инструментах разработки и убедитесь сами, выделив два элемента DIV).
Используйте button в качестве селектора подключения

 jQuery(($) => {
  $('button').connections();
}); 
 button {
  min-width: 120px;
  height: 120px;
  background: #f56c29;
  border-radius: 60px;
}

connection {
  border: 30px solid #b51c29;
  border-radius: 50px;
}

button.about {
  position: absolute;
  transition: .5s ease;
  top: 50%;
  left: 50%;
} 
 <div>
  <button>Text</button>
</div>
<div>
  <button class="about">About</button>
</div>


<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/musclesoft/jquery-connections@1.0.1/jquery.connections.js"></script>
Метки: ,