javascript - 在 <a> 内切换 span

Question

我正在尝试创建一个函数，如果选择的话，它将切换可选输入，这是我到目前为止所做的:

HTML:

<div>
    <input>
    <a class="input-toggle" href="#"><span>Toggle Option</span><span>Close</span></a>
    <div class="input-toggle-content">
        <input name="">
    </div>
</div>

JavaScript:

$('.input-toggle').each(function() {
    $(this).next("div").hide().end();
    $("span:last-of-type").hide();
    $(this).on('click', function() {
        $(this).next("div").slideToggle();
        $("span:first-of-type").hide();
        $("span:last-of-type").show();
    });
});

所以，它应该工作的方式是，当单击 .input-toggle 时，它​​旁边的 div 将被切换，如果再次单击，div 将消失......我得到了这个工作，但是，我还想切换<span>Toggle Option</span>与 <span>Close</span>我无法让它工作...我不知道我构建函数的方式是否正确？

Answer 1

尝试，

$('.input-toggle + div.input-toggle-content').hide();
$(".input-toggle span:last-of-type").hide();

$('.input-toggle').click(function () {
    $(this).next('div.input-toggle-content').toggle();
    var spans = $('span', this);
    spans.not(spans.filter(':visible').hide()).show();
});

DEMO