jquery код для javascript чисто в поле выбора - PullRequest
0 голосов
/ 10 июля 2020

Здравствуйте, у меня проблемы с передачей этого кода из jquery в чистый js

у меня есть это:

function xd() {
  const dropDown = document.querySelector(".dropdown-el");
  dropDown.addEventListener("click", event(event));
  function event(e){
    e.preventDefault();
    e.stopPropagation();
    dropDown.classList.add('expanded')
    
  }
}
.dropdown-el {
     margin-top: 20vh;
     min-width: 12em;
     position: relative;
     display: inline-block;
     margin-right: 1em;
     min-height: 2em;
     max-height: 2em;
     overflow: hidden;
     top: 0.5em;
     cursor: pointer;
     text-align: left;
     white-space: nowrap;
     color: #444;
     outline: none;
     border: 0.06em solid transparent;
     border-radius: 1em;
     background-color: #cde4f5;
     transition: 0.3s all ease-in-out;
}
 .dropdown-el input:focus + label {
     background: #def;
}
 .dropdown-el input {
     width: 1px;
     height: 1px;
     display: inline-block;
     position: absolute;
     opacity: 0.01;
}
 .dropdown-el label {
     border-top: 0.06em solid #d9d9d9;
     display: block;
     height: 2em;
     line-height: 2em;
     padding-left: 1em;
     padding-right: 3em;
     cursor: pointer;
     position: relative;
     transition: 0.3s color ease-in-out;
}
 .dropdown-el label:nth-child(2) {
     margin-top: 2em;
     border-top: 0.06em solid #d9d9d9;
}
 .dropdown-el input:checked + label {
     display: block;
     border-top: none;
     position: absolute;
     top: 0;
     width: 100%;
}
 .dropdown-el input:checked + label:nth-child(2) {
     margin-top: 0;
     position: relative;
}
 .dropdown-el::after {
     content: "";
     position: absolute;
     right: 0.8em;
     top: 0.9em;
     border: 0.3em solid #3694d7;
     border-color: #3694d7 transparent transparent transparent;
     transition: 0.4s all ease-in-out;
}
 .dropdown-el.expanded {
     border: 0.06em solid #3694d7;
     background: #fff;
     border-radius: 0.25em;
     padding: 0;
     box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px;
     max-height: 15em;
}
 .dropdown-el.expanded label {
     border-top: 0.06em solid #d9d9d9;
}
 .dropdown-el.expanded label:hover {
     color: #3694d7;
}
 .dropdown-el.expanded input:checked + label {
     color: #3694d7;
}
 .dropdown-el.expanded::after {
     transform: rotate(-180deg);
     top: 0.55em;
}
 
          <div class="service_mode flex">
            <span class="dropdown-el">
              <input
                type="radio"
                name="sortType"
                value="Relevance"
                checked="checked"
                id="sort-relevance"
              /><label for="sort-relevance">Relevance</label>
              <input
                type="radio"
                name="sortType"
                value="Popularity"
                id="sort-best"
              /><label for="sort-best">Product Popularity</label>
              <input
                type="radio"
                name="sortType"
                value="PriceIncreasing"
                id="sort-low"
              /><label for="sort-low">Price Low to High</label>
              <input
                type="radio"
                name="sortType"
                value="PriceDecreasing"
                id="sort-high"
              /><label for="sort-high">Price High to Low</label>
              <input
                type="radio"
                name="sortType"
                value="ProductBrand"
                id="sort-brand"
              /><label for="sort-brand">Product Brand</label>
              <input
                type="radio"
                name="sortType"
                value="ProductName"
                id="sort-name"
              /><label for="sort-name">Product Name</label>
            </span>
          </div>

и это код jquery, который мне нужно передать javascript:

$('.dropdown-el').click(function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(this).toggleClass('expanded');
  $('#'+$(e.target).attr('for')).prop('checked',true);
});
$(document).click(function() {
  $('.dropdown-el').removeClass('expanded');
});

В основном я пытался добавить событие, чтобы добавить класс и удалить его, но безуспешно, я не могу придумать, как добавить и удалить класс: «расширен» правильно

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

1 Ответ

0 голосов
/ 10 июля 2020

1-й: Вам нужно вызвать функцию xd()

2-й: Вместо event(event) можно использовать function(e){ event(e); }

3-й: Чтобы удалить класс, используйте .remove вместо .add

Я изменил вложенные функции на expand и close .. см. Следующий код

function xd() {
  const dropDown = document.querySelector(".dropdown-el");
  dropDown.addEventListener("click", function(e){expand(e)});
  document.addEventListener("click", close);
  function expand(e){
    e.preventDefault();
    e.stopPropagation();
    dropDown.classList.add('expanded');
  }
  function close(){
    dropDown.classList.remove('expanded');
  }
}
xd();
.dropdown-el {
     margin-top: 20vh;
     min-width: 12em;
     position: relative;
     display: inline-block;
     margin-right: 1em;
     min-height: 2em;
     max-height: 2em;
     overflow: hidden;
     top: 0.5em;
     cursor: pointer;
     text-align: left;
     white-space: nowrap;
     color: #444;
     outline: none;
     border: 0.06em solid transparent;
     border-radius: 1em;
     background-color: #cde4f5;
     transition: 0.3s all ease-in-out;
}
 .dropdown-el input:focus + label {
     background: #def;
}
 .dropdown-el input {
     width: 1px;
     height: 1px;
     display: inline-block;
     position: absolute;
     opacity: 0.01;
}
 .dropdown-el label {
     border-top: 0.06em solid #d9d9d9;
     display: block;
     height: 2em;
     line-height: 2em;
     padding-left: 1em;
     padding-right: 3em;
     cursor: pointer;
     position: relative;
     transition: 0.3s color ease-in-out;
}
 .dropdown-el label:nth-child(2) {
     margin-top: 2em;
     border-top: 0.06em solid #d9d9d9;
}
 .dropdown-el input:checked + label {
     display: block;
     border-top: none;
     position: absolute;
     top: 0;
     width: 100%;
}
 .dropdown-el input:checked + label:nth-child(2) {
     margin-top: 0;
     position: relative;
}
 .dropdown-el::after {
     content: "";
     position: absolute;
     right: 0.8em;
     top: 0.9em;
     border: 0.3em solid #3694d7;
     border-color: #3694d7 transparent transparent transparent;
     transition: 0.4s all ease-in-out;
}
 .dropdown-el.expanded {
     border: 0.06em solid #3694d7;
     background: #fff;
     border-radius: 0.25em;
     padding: 0;
     box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px;
     max-height: 15em;
}
 .dropdown-el.expanded label {
     border-top: 0.06em solid #d9d9d9;
}
 .dropdown-el.expanded label:hover {
     color: #3694d7;
}
 .dropdown-el.expanded input:checked + label {
     color: #3694d7;
}
 .dropdown-el.expanded::after {
     transform: rotate(-180deg);
     top: 0.55em;
}
<div class="service_mode flex">
  <span class="dropdown-el">
    <input
      type="radio"
      name="sortType"
      value="Relevance"
      checked="checked"
      id="sort-relevance"
    /><label for="sort-relevance">Relevance</label>
    <input
      type="radio"
      name="sortType"
      value="Popularity"
      id="sort-best"
    /><label for="sort-best">Product Popularity</label>
    <input
      type="radio"
      name="sortType"
      value="PriceIncreasing"
      id="sort-low"
    /><label for="sort-low">Price Low to High</label>
    <input
      type="radio"
      name="sortType"
      value="PriceDecreasing"
      id="sort-high"
    /><label for="sort-high">Price High to Low</label>
    <input
      type="radio"
      name="sortType"
      value="ProductBrand"
      id="sort-brand"
    /><label for="sort-brand">Product Brand</label>
    <input
      type="radio"
      name="sortType"
      value="ProductName"
      id="sort-name"
    /><label for="sort-name">Product Name</label>
  </span>
</div>

Как удалить класс из элементов в чистом виде JavaScript?

Как могу ли я изменить класс элемента с помощью JavaScript?

Как получить HTML для элемента DOM в javascript

Как получить внутренний HTML этого элемента в javascript?

Как изменить значение элемента HTML, используя javascript?

.parents () без jquery - или querySelectorAll для родителей

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...