Как изменить HTML с помощью переключателя JQuery? - PullRequest
Новая
       20

Как изменить HTML с помощью переключателя JQuery?

0 голосов
/ 09 апреля 2019

Когда вы нажимаете на значок меню, создается новый слой, и вы хотите изменить его значок меню.

Вы можете открывать и закрывать новый слой с помощью toggleClass.Когда я открываю новый слой, я пытаюсь изменить его с существующего значка меню на другой значок меню.

html 

<div class="mobile-nav-container">
    <nav class="mobile-nav">
        <ul>
            <li class="with-submenu">
                <button class="btn_popular">
                    <svg class="home-mark" height="100" width="100">
                      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
                    </svg> 
                </button>
            </li>
            <li class="with-submenu">
                <button class="btn_trends">
                    <svg class="trends-mark" height="140" width="500">
                      <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
                    </svg>
                </button>
            </li>
        </ul>
    </nav>
</div>

<div class="trends-layer">
    <span>new layer</span>
</div>

css 

.mobile-nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #fff;
    z-index: 50;
    border-top: 1px solid #eee;
    height: 47px;
    left: 0;
    right: 0;
    top: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.mobile-nav>ul {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 100%;
}

.mobile-nav>ul, .mobile-nav>ul>li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.mobile-nav>ul>li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    width: 50%;
}

.trends-layer {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    width: 100%;
    background: hsla(0,0%,100%,.98);
    color: #1a1a1a;
    font-size: 1.8rem;
    height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    -webkit-transition: opacity .15s,height 0s .15s;
    transition: opacity .15s,height 0s .15s;
}

.trends--active {
    height: 100%;
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity .15s,height 0s;
    transition: opacity .15s,height 0s;
    padding-bottom: 8rem;
}

javascript 

$(function() {

    $('.btn_trends').on('click', function (e) {
      e.preventDefault();
      var trendsCloseBtn = $('.trends--active');

        $(this).toggleClass('trends--active');
        $('.trends-layer').toggleClass('trends--active');

        if (trendsCloseBtn.children('.trends-close')) {
               $('.trends-close').remove;
               $('.btn_trends').html('<svg class="trends-mark" height="140" width="500"><ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" /></svg>');
            } else {
               $('.trends-close').remove;
           $('.btn_trends').html('<svg class="trends-close" height="210" width="400"><path d="M150 0 L75 200 L225 200 Z" /></svg>');
            }

    });

});

При щелчке по классу btn_trends

  1. Появляется новый слой
  2. Существующий SVG (.trends-mark) исчезает и новый SVG (.trend-mark).

ToggleClass прекрасно работает в приведенном выше JavaScript-коде, но менять SVG нехорошо.

Спасибо за внимание к этому вопросу.

демонстрационный фрагмент

https://codepen.io/l2zeo/pen/mgOKzB

1 Ответ

1 голос
/ 09 апреля 2019

см. Обновленный codepen

Вместо: 

if (trendsCloseBtn.children('.trends-close')) {
....
}

Я изменил его на: 

if ($(this).hasClass("trends--active")) {
...
}

Является ли ожидаемый результат тем, что вынужно?

...