使用jQuery显示/隐藏元素，同时更改切换链接的文本
我现在已经花了大约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)时切换ex VAT价格的显示，并更改流程中的文本。
我尝试过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');
}
});
});这是目前功能的一半，因为它将显示不含增值税的价格，但立即“滑回”视野。当我说幻灯片时，上面的.toggle函数创建了一个进入和退出的过渡，这样当切换被点击时，.price-excluding-tax - <span>将被带进/带出视图，带有宽度，高度和不透明度的过渡，而我只是想要一个简单的display: block / display:none;，比如this。似乎一旦你将一个函数附加到.toggle，它的功能就不同了。
我怀疑不含增值税的价格可能会立即滑回视线之外，因为我默认会用$j('.price-info .price-excluding-tax').hide();将其隐藏起来，我不知道。
我真的不关心我现在是否保留上面的内容，我只需要一些可以工作的东西，那就是显示ex VAT价格(同时隐藏Inc.增值税价格，并同时更改切换文本。
在有人问我要jsFiddle之前，我已经created one了，.toggle运行得很好，正如我所希望的那样--它只是不能在有问题的网站上工作(所以可能会有一些干扰，控制台中没有错误)。不过，小提琴并不处理文本的变化。
回答 2
Stack Overflow用户
发布于 2015-06-05 13:20:45
您的问题有两种可能的解决方案：
解决方案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();
});解决方案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');
}
});Stack Overflow用户
发布于 2015-06-05 21:23:03
你不需要javascript来做这件事。对于这个问题，有一个Pure CSS解决方案。
我已经将两个标签连接到一个用作切换按钮的复选框。一个标签使复选框起到切换按钮的作用，另一个标签显示/隐藏适当的价格。
试试下面的代码片段。
.price {
font-family: "Roboto Slab", serif;
font-size: 25px;
}
.price::before {
content: "£";
float: left;
margin-top: 5px;
margin-right: 5px;
}
.price span {
width: 60px;
float: left;
margin-top: 5px;
text-align: right;
}
input#chkTax {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
input#chkTax + label {
padding: 2px;
width: 120px;
height: 40px;
cursor: pointer;
}
input#chkTax + label:before,
input#chkTax + label:after {
display: inline-block;
position: absolute;
width: 120px;
height: 40px;
left: 100px;
color: #fff;
font-family: "Roboto Slab", serif;
font-size: 20px;
text-align: center;
line-height: 40px;
border-radius: 3px;
border: 2px solid #ddd;
}
input#chkTax + label:before {
background-color: #dddddd;
content: attr(data-off);
transition: transform 0.5s;
backface-visibility: hidden;
}
input#chkTax + label:after {
background-color: #8ce196;
border-color: #6cc176;
content: attr(data-on);
transition: transform 0.5s;
transform: rotateY(180deg);
backface-visibility: hidden;
}
input#chkTax:checked + label:before {
transform: rotateY(180deg);
}
input#chkTax:checked + label:after {
transform: rotateY(0);
}
input#chkTax + label:hover:before {
border-color: #bbb;
background-color: #ccc;
}
input#chkTax + label:hover:after {
border-color: #1ca136;
background-color: #7cd186;
}
input#chkTax:checked + label + label .withtax,
.withouttax {
display: block;
}
input#chkTax:checked + label + label .withouttax,
.withtax {
display: none;
}
.price-info {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
}<div class="price-info">
<input type="checkbox" id="chkTax" />
<label for="chkTax" class="cool-button" data-on="includes tax" data-off="excludes tax"></label>
<label for="chkTax" class="price">
<span class="withtax">
1,000
</span>
<span class="withouttax">
900
</span>
</label>
</div>
阅读更多信息：
可以在here找到一篇关于可以做什么的很好的文章
https://stackoverflow.com/questions/30667422
复制相似问题
腾讯云开发者
