jquery - 在更改切换链接的文本时使用 jQuery 显示/隐藏元素

Question

现在已经花了大约 6 个小时试图让它工作，并且已经尝试了大约 40 种不同的 jQuery 代码变体，但没有运气，所以你可以想象，现在我开始为此而烦恼......

示例(压缩)HTML:-

<span class="price-info">
    <span class="price-including-tax">
        <span class="price">£100</span>
    </span>

    <span class="price-excluding-tax">
        <span class="price">£50</span>
    </span>
</span>

<span class="toggle">(Show ex VAT price)</span>

我只是想在单击链接 (.toggle) 时切换显示不含增值税的价格，并在此过程中更改文本。

我已经尝试过 jQuery .toggle、.addClass、.removeClass、.show、.hide - 各种各样!

我当前的 jQuery 脚本如下所示:-

          $j('.price-info .price-excluding-tax').hide();
            $j('.toggle').click(function() {
              var link = $j('.toggle');
                $j('.price-info .price-excluding-tax').toggle(function() {
                  if ($j('.toggle').is(":visible")) {
                    link.text('Show inc VAT price');
                  } else {
                    link.text('Show ex VAT price');
                  }
                });
            });

该功能目前处于半功能状态，因为它会显示不含增值税的价格，但会立即“滑出” View 。当我说幻灯片时，上面的 .toggle函数正在创建进出过渡，以便在单击切换时，.price-excluding-tax <span>通过宽度、高度和不透明度转换进入/离开 View ，而我只是在一个简单的 display: block 之后/display:none;喜欢this .似乎一旦将函数附加到 .toggle , 它的功能不同。

我怀疑不含增值税的价格可能会立即滑出 View ，因为默认情况下我使用 $j('.price-info .price-excluding-tax').hide(); 将其隐藏在 View 之外。 ，我不知道。

我真的不在乎我现在是否保留以上内容，我只需要一些有用的东西，那就是显示前增值税价格(同时隐藏公司增值税价格并更改切换文本同时。

在任何人要求 jsFiddle 之前，我已经 created one已经并且 .toggle 工作正常并且如我所愿 - 它只是在有问题的网站上不起作用(因此某处可能存在一些干扰，控制台中没有错误)。不过， fiddle 不处理文本更改。

Answer 1

针对您的问题的两种可能的解决方案:

解决方案一:

为文本使用 2 个 div，然后切换它们。像这样:

<span class="toggleText">(Show ex VAT price)</span>
<span class="toggleText" style="display:none;">(Show inc VAT price)</span>

使用jquery:

$j('.toggle').click(function() {
    $j('.price-info .price-excluding-tax').toggle();
    $j('.toggleText').toggle();
});

jsFiddle

解决方案 2:

改进您当前的代码:

$j('.price-excluding-tax').toggle(function() {
    if ($j('.price-excluding-tax').is(":visible")) {
       $j(".toggle").text('Show inc VAT price');
    } else {
       $j(".toggle").text('Show ex VAT price');
    }
});

jsFiddle