javascript - 如何用jquery切换改变html？

Question

当您单击菜单图标时，会创建一个新图层，并且您想要更改其菜单图标。

您可以使用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>');
            }

    });

});

When you click the btn_trends class

1. A new layer appears
2. Existing SVG (.trends-mark) disappears and new SVG (.trends-mark) appears.

ToggleClass 在上面的 javascript 代码中工作正常，但更改 SVG 就不太好了。

感谢您对此事的关注。

演示片段

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

Answer 1

查看更新的codepen

而不是:

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

我把它改为:

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

预期结果是您需要的吗？